why react
-
리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용합니다.
-
MVC, MVW 아키텍처는 프로그램이 사용자에게 어떤 작업을 받으면 컨트롤러가
모델 데이터를 조회하거나 수정하고, 변경된 사항을 뷰에 반영합니다. -
어떤 데이터가 변할 때마다 어떤 변화를 줄지 고민하는 것이 아니라 그냥 기존 뷰를
날려버리고 처음부터 새로 렌더링하는 방식입니다. -
이렇게 하면 애플리케이션 구조가 매우 간단하고, 코드량도 줄어듭니다.
더 이상 어떤 변화를 줄지 신경 쓸 필요가 없고, 뷰가 어떻게 생길지 선언하며,
데이터에 변화가 있으면 기존에 있던 것은 버리고 정해진 규칙에 따라 새로 렌더링
하면 됩니다.
cra (create-react-app)
- 리액트 프로젝트를 생성할 때 필요한 웹팩, 바벨의 설치 및 설정 과정을 생락하고
바로 간편하게 프로젝트 작업 환경을 구축해 주는 도구입니다.
$ yarn create react-app 프로젝트 이름 or
$ npm init react-app 프로젝트 이름
jsx
- 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼습니다.
HTML코드를 작성하는 것과 비슷하기 때문에 보기 쉽고 활용도가 높습니다.
Component
- 리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체입니다.
- 다른 아키텍처에서의 템플릿은 데이터셋이 주어지면 HTML 태그 형식을 문자열로 반환하는데, 컴포넌트는 이보다 더 복합적인 개념입니다.
- 재사용이 가능한 API(UI)로 수많은 기능들을 내장하고 있으며 컴포넌트 하나에서 해당컴포넌트의 생김새와 작동 방식을 정의합니다.
props
- 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
- props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(App 컴포넌트)에서
설정할 수 있습니다.
state
- 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
- 두 가지 종류의 state 가 있는데
클래스형 컴포넌트가 지니고 있는 state와
함수형 컴포넌트에서 useState라는 함수를
통해 사용하는 state이다.
props vs state
- state와 props는 둘 다 object 이고, 화면에 보여줄 정보(상태)를 가지고 있다는 점에서 서로 비슷한 역할을 합니다.
- props는 컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있고(parameter 처럼), state는 컴포넌트 내에서 정의하고 사용합니다.
constructor, super
constructor
-
constructor는 class의 instance가 생성될 때 항상 호출되는 함수(생성자)입니다.
-
초기화할 값들을 constructor에서 세팅해준다고 보면 됩니다.
super()
-
클래스형 컴포넌트에서 constructor를 작성할 때 super() 라는 키워드는 꼭 작성해주셔야 합니다. 그래야 React.Component class에 있는 메서드들(ex. render)을 사용할 수 있습니다.
-
이 함수가 호출되면 현재 클래스형 컴포넌트가 상속하고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 줍니다.
lifecycle
-
라이프사이클은 마운트, 업데이트, 언마운트 카테고리로 나눕니다.
-
라이프사이클의 종류는 총 아홉 가지입니다.
- Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드입니다.
- Did 접두사가 붙은 메서드는 어떤 작업을 작동한 후에 실행되는 메서드입니다.
Mount
DOM이 생성되고 웹 브라우저상에 나타나는 것을 마운트라고 합니다.
fetch
mock data
map
파라미터로 전달된 함수를 사용해서 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성한다. 따라서 반복되는 컴포넌트를 렌더링할 수 있다.
