학습 내용
리액트의 기본 구성요소 및 사용방법에 대하여 학습하였다.
- npm, npx, yarn
npm(node package manager)
Node.js의 기본 패키지 관리자
Node.js와 함께 설치되며, Node.js 애플리케이션의 종속성을 관리하고 패키지를 설치, 업데이트, 제거하는 데 사용한다.
npx(node package execute)
Node 패키지를 실행하는 도구
yarn
페이스북에서 개발한 패키지 매니저
더 빠르고, 더 안전하며, 더 확정적인 의존성 관리를 목표로 개발되었다.
- 바벨과 웹팩
바벨(babel)
서로 다른 언어 규약으로 작성된 파일을 웹 브라우저가 이해할 수 있는 형태의 파일로 변환해주는 역할을 하는 개발 툴
웹팩(WebPack)
여러 개의 자바스크립트 모듈을 하나의 파일으로 묶어주는 역할
- 컴포넌트
웹의 구성 요소를 아주 작은 단위로 분할해 재사용 가능하게 독립적인 코드로 작성한 것
- props
컴포넌트 간에 데이터를 전달하는 방법
'props'는 부모 컴포넌트가 자식 컴포넌트에 전달하는 읽기 전용 데이터
컴포넌트는 props를 이용해 랜더링 결과를 동적으로 변경할 수 있다.
-리액트 훅과 종류
리액트 혹은 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리
useState
리액트에서 상태 변수를 선언하고 관리하는 데 사용하는 훅
가장 기본이면서 가장 많이 사용하는 중요한 훅
useID
고유한 값을 생성할 때 사용되는 훅
useRef
HTML 요소에 접근하거나 컴포넌트의 랜더링에 영향없이 값을 유지하고 싶을 때 사용.
-리액트 훅 메모이제이션(Memoization)
메모이제이션
컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술
동적 계획법(Dynamic Programming)의 기반이 되는 개념인데, 리액트에서도 이러한 내용이 활용되고 있다는 것이 놀라웠다.
useCallBack / useMemo / useReducer 등이 있다.
-리액트 컨텍스트
앱에서 컴포넌트에게 props를 사용하지 않고 필요한 데이터를 넘겨주며 사용할 수 있게 해준다.
과제 및 실습 내용
리액트를 처음 배울 때 많이 사용하는 할 일 관리 리스트를 직접 만들어보며 배운 내용들을 구현해 보았다.
회고
쉽지 않을 것은 알고 있었지만.. 훨씬 어려워진 학습 내용들로 인해 공부만 한 한 주였다..
배운 내용들을 블로그에 미리 하루하루 기록하지 않은 것이 후회된다.. 코드 에디터로만 실습하다 보니 양이 이 정도로 방대할 줄을 몰랐다.
다음주부터는 본격적인 Next.js 수업이 시작된다. 기존에 한 번도 사용하지 않은 프레임워크지만, 최선을 다해 수업에 임하자!
본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.