리액트 입문주차 과제 및 퀴즈
- 리액트 입문 주차 개인 과제를 통해 리액트의 기초를 익힐 수 있는 한주였다. 완료버튼 작동시 수정이 되는 부분에서 화면에 표현이 안되어 애를 먹었다. 하지만 이 문제를 해결하고, 완성했을 때 성취감이 매우 컸다.
개인 과제 TIL
숙련주차 시작
- 새롭게 숙련주차를 맞이했고, 새로운 강의를 시청했다. 역시나 입문 주차와는 다른 난이도의 내용이었다. 단번에 이해하기 어려운 내용이었다. 일단은 흐름을 이해하려고 노력했다. 확실히 이해가 되지 않는 부분은 다시 한번 들어보고, 반복이 필요할 것 같다.
state
- state란 컴포넌트 내부에서 바뀔수 있는 값을 의미한다.
- state의 변경은 UI로의 반영을 위해서이다.
- state를 만들 때는 useState()훅을 사용한다.
const [ state, setState ] = useState("초기값")- state를 변경할 때는 setSate(바꾸고 싶은 값)를 사용한다.
Props
- 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터다.
- 컴포넌트 간의 정보 교류 방법이다.
- props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] ->[자식] 방향으로만 흐른다(단방향).
- props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.
Prop drilling
- 부모 자식간의 데이터 전달방법인 props가 그 사이에 구간이 많아진다면, 여러변을 거쳐 데이터가 내려진다. 이를 prop drilling, 아래로 뚫고 내려간다. 라고 한다.
- 최종적으로 내려받을 자식 컴포넌트 사이에 자식 컴포넌트는 필요없는 렌더링이 이루어진다. 이를 피하기 위해 'redux'와 같은 데이터 상태관리 툴이 존재한다.
리렌더링 발생 조건
- setState를 통해서 state가 변경될 때
- 새로운 props가 들어올 때
- 부모컴포넌트가 렌더링 될 때
도전을 즐기는 자