개발환경 🛠
- 프로젝트 디렉토리 생성
cd/디렉토리 이동npx create-react-app .npm startcontrol + c
기본 개념 📁
node.js
node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임으로, 웹 브라우저 환경이 아닌 곳에서도 자바스크립트를 사용하여 연산할 수 있게 해준다. node.js에는 ECMPScript6(자바스크립트 공식 문법)를 호환시켜주는 바벨(babel), 모듈화 된 코드를 하나로 합치고 코드 수정 시 웹 브라우저를 리로딩하는 등의 역할을 하는 웹팩(webpack) 등이 있다. node.js를 설치할 때 패키지 매니저 도구인 npm도 같이 설치된다.
npm
패키지 매니저 도구로 다른 개발자가 만든 패키지(재사용 가능 코드)를 설치하거나 설치한 패키지의 버전 관리를 할 수 있도록 도와준다. 리액트 또한 하나의 패키지다.
리액트는 직접적으로 node.js와는 연관이 없지만, node.js가 지닌 수많은 기능들이 리액트 개발 시에 필요하기 때문에 설치를 해주어야 한다.
Webpack
Webpack은 여러개 파일을 하나의 파일로 합쳐주는 모듈 번들러(Module bundler)이다. html 파일에 들어가는 자바스크립트 파일들을 하나의 자바스크립트 파일로 만들어주는 방식을 모듈 번들러라고 한다.
필요한 다수의 자바스크립트 파일을 하나의 자바 스크립트 파일로 만들어서 웹페이지 성능 최적화 해준다.
Babel
Cross Browsing 이슈를 해결하기 위해 생겨난 툴이 babel이다. 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많은데, 이러한 차이를 최소화 하여 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 위해서 사용한다.
Redux
Redux는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. Redux를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다.
Hooks
Hooks는 리액트 v16.8 에 새로 도입된 기능으로, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.
🪄 Hooks 기능
- useState
컴포넌트의 state(상태)를 관리 할 수 있다.
상태에 따라, 다른 화면 출력을 할 수 있다.- useEffect
렌더링 이후에 실행할 코드를 만들수 있다.
어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다.- useContext
부모컴포넌트와 자식컴포넌트 간의 변수와 함수를 전역적으로 정의할 수 있다.- useReducer
state(상태) 업데이트 로직을, reducer 함수에 따로 분리 할 수 있다.- useRef
컴포넌트나 HTML 요소를 래퍼런스로 관리할 수 있다.- forwardRef
useRef로 만든 래퍼런스를 상위 컴포넌트로 전달할 수 있다.- useImperativeHandle
useRef로 만든 래퍼런스의 상태에 따라, 실행할 함수를 정의 할 수 있다.- useMemo, useCallback
의존성 배열에 적힌 값이 변할 때만 값,함수를 다시 정의할 수 있다. ( 재랜더링시 정의 안함 )- useLayoutEffect
모든 DOM 변경 후 브라우저가 화면을 그리기(render)전에 실행되는 기능을 정할 수 있다.- useDebugValue
사용자 정의 Hook의 디버깅을 도와준다.
🧸💗 참고 블로그
