Hook?? Hook은 React 16.8 버전에서 새로 추가되었다. Hook 은 클래스 컴포넌트를 작성하지 않아도 상태 값과 여러 React의 기능을 사용할 수 있다. 즉, 함수형 컴포넌트에서 React state와 생명주기(lifecycle features)를 연동할 수 있게 해주는 함수 Hook의 특징?? 선택적 사용 : 기존의 코드를 다시 작성할 필요 없이 일부의 컴포넌트들 안에서 Hook을 사용할 수 있다. 하지만 Hook이 필요 없는 상황이라면 굳이 Hook을 사용할 필요는 없다! 100% 이전 버전과의 호환성 : Hook은 호환성을 깨뜨리는 변화가 없다! 현재 사용 가능 : Hook은 리액트 v16.8.0에서 사용할 수 있다.

모든 리액트 컴포넌트는 라이프사이클이 존재한다. 프로젝트를 진행하다 보면 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나 컴포넌트를 업데이트하기 전후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지할 필요가 있을 수 있다. 바로바로 이때! 라이프사이클 메서드를 사용한다. 이러한 라이프사이클 메서드는 클래스형 메서드에서만 사용이 가능하고 함수형은 Hook으로 작업! 라이프사이클 메서드의 종류는 총 아홉 가지로, Will 접두사가 붙은 메서드는 어떤 작업을 하기 전, Did 접두사는 어떤 작업을 작업한 후 실행되는 메서드이다!! 라이프 사이클은 또 3가지, 마운트, 업데이트, 언마운트 카테고리로 나눈다. 마운트 DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트(mount)..

history history라는 기능이 Route에 많이 보이는데, 도당체 어떤 거냥?? history는 자바스크립트 다양한 환경에서 history 세션을 관리해준다. https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/history.md 깃허브 주소에서 보자면 history objects typically have the following properties and methods: length - (number) The number of entries in the history stack action - (string) The current action (PUSH, REPLACE, or POP) ..

Route를 들어가기 앞서 SPA를 다시 한번 알아보자 SPA? Single Page Application의 약자로, 말 그대로 페이지가 1개인 애플리케이션이란 뜻이다. 전통적인 웹 어플리케이션의 구조는 여러 페이지로 구성되어 있다. react-router는 써드파티 라이브러리로, 공식은 아니지만 가장 많이 사용되고 있는 라이브러리이다. 이 라이브러리는 클라이언트 사이드에서 이뤄지는 라우팅을 간단하게 해 준다. react-router-dom 기본적으로 react-router-dom이 브라우저에서 사용되는 리액트 라우터이다. import React from 'react'; import {Route} from 'react-router-dom'; import { Home, About } from 'pages'..

JSX ? JSX는 Javescript와 XML을 합쳐서 만들어진 자바스크립트 확장 문법이다. 브라우저에서 실행되기 전에 코드가 빌드되는 과정에서 바벨을 사용해 일반적인 자바스크립트 형태로 변환한다. 리액트를 사용할때만 사용되므로 공식적인 자바스크립트 문법은 아니다. 그렇기때문에 사용하기위해서 바벨에서 설정을 해야한다.

1. SPA? Single Page Application(싱글 페이지 애플리케이션)의 약어이다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미이다. 과거의 웹 사이트 전통적인 웹 사이트는 요즘보다 문서 하나의 용량이 적었다. 그래서 새로운 페이지를 요청하면 서버가 완전히 새로운 페이지를 전송했다. 하지만 요즘엔 웹 사이트가 고도화되어, 한 페이지의 용량이 커지고, 그럴때마다 새로운 페이지를 전달하기엔 버거워졌다. SPA! 용량이 커진 웹 사이트를 무리없이 전송하기 위해서 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가면서 표현하는 것이 SPA인것이다. 우리가 무언가를 클릭하거나 스크롤하면 홈페이지는 상호작용을 위해서 최소한의 요소만 변경한다. 페이지 이동이 발생한 경우에도 최초 ..

1. 컴포넌트? 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체이다. => 이것을 보여주는 것이 렌더링 말이 너무 어려운데, 한마디로 앱을 이루는 최소한의 단위이다. 2. 컴포넌트의 종류 컴포넌트의 종류는 함수형 컴포넌트와 클래스형 컴포넌트 2가지가 있다. 1. 함수형 컴포넌트 function Componenet(props) { return Hello! World! } JavaScript 함수의 형태로 만들기 때문에 함수형 컴포넌트라고 불린다. 장점 클래스형 컴포넌트보다 선언하기 편하다 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다. 결과물의 파일 크기가 더 작다.( 큰 차이까진 아니다) 단점 state와 라이프사이클 API의 사용이 불가능하다.(Hooks라는 기능이 도입되므로 대부분 해결..

1. 리액트? 리액트는 facebook에서 제공해주는 웹과 앱의 View를 개발할 수 있는 프런트엔드 라이브러리이다. 여기서 React가 프레임워크인지 라이브러리인지 많은 논란이 있다. 프레임워크란 원하는 기능 구현에 집중하여 개발할 수 있도록 필요한 기능을 갖추고 있는 것이다. 라이브러리는 활용 가능한 도구들의 집합이다. 이 둘의 차이점은 제어 흐름에 대한 주도성이 누구에게 그리고 어디에 있는가에 있다. 프레임워크는 자신이란 틀에 맞게 사용자가 필요한 기능을 입력하는 것이고, 라이브러리는 개발자가 필요한 기능을 원할 때 입력한다. 리액트는 필요로 할때 useEffect() 같은 함수를 사용해서 특정한 동작을 할 수 있게 해 주기 때문에 라이브러리라고 한다. 2. 특징 Virtual DOM을 사용한다. ..