Mission. Props 개념 학습, 실습
1) 목적
- 기초 문법을 숙지하여 리액트 컴포넌트 안에서 JS를 사용하기 위함
- 컴포넌트 개념을 숙지하여 컴포넌트를 생성하기 위함
2) 방법
- react 기본 문법 학습
- Props 추출
- State 개념 학습
- 실습
3) 알게된 점
props :
컴포넌트 끼리의 정보교환 방식
반드시 위(부모)에서 아래(자식)방향으로 흐른다. => 단방향
읽기전용으로 취급하며 변경하지 않는다.
prop drilling :
부모 -> 자식 -> 그 자식 -> 그 자식의 자식
마치 아래로 뚫고 내려 가듯 데이터를 내려주는 것을 말한다.
props.children :
작성한 JSX을 import해서 똑같은 형식의 페이지를 만들 수 있다.
props 추출 :
구조분해할당
defaultProps :
부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값
매개변수 할당이 되지 않는 경우를 대비해서 자식 컴포넌트에 기본값을 세팅
=> 함수의 default argument를 설정하는 것과 같다.
default argument :
매개변수가 지정되지 않았으면 자동으로 지정해줄 값을 정하라는 의미
react state :
state 쓰는 목적: UI를 바꾸기 위해 => 렌더링을 다시하기 위해
useState hook :
기능을 하는 함수
useState : React 형태의 api
앞으로 배울 useState hook
useState, useEffect, useContext, useMemo
리덕스 useDispatch, useSelector ~~
event : 유저가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것
event.target.value : 사용자가 입력 값이 매개변수로 들어온다.
onClick
onChange
리액트 생명주기 :
Mounting, Updating, Unmounting
=> 화면상에 떠오르고, 갱신되고, 죽는 과정
=> 갱신은 랜더를 통해 이루어진다.
불변성 : 메모리에 있는 값을 변경할 수 없는 것
원시데이터는 불변성이 있다.
원시데이터가 아닌 것들은 불변성이 없다.
리액트는 화면을 렌더링할지를 state의 변화에 따라서만 결정한다
=> 단순 변수는 무시한다.
=> 불변성 없는 데이터는 렌더링 되지 않는다.
불변성 없는 데이터를 렌더링하고 싶다면 새로운 객체를 만들어야한다. (스프레드 문법, map, filter)
DOM 객체 조작 방법 :
querySelector, id, class
렌더링 :
컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업을 의미
필요한 package 설치 명령어 : npm i
map 함수 : 원래 데이터를 가공하여 출력하는 방법
filter 함수 : 조건에 맞는 데이터만 출력하는 방법
