- React State & Props 들어가기에 앞서 check 해보기
☑️ JSX
☑️ React SPA
☑️ React Router
- state, props의 개념에 대해서 이해하고, 실제 프로젝트에 바르게 적용할 수 있다.
o
state는 컴포넌트 내부에서 변하는 값을 의미하고, props는 부모 컴포넌트로부터 전달 받는 변하지 않는 값을 의미한다.props는 객체 형태로 변하지 않는 값이므로 읽기 전용이다.
만약 읽기 전용 값이 아니라면, 하위 컴포넌트에서 값을 변경하면 개발자의 의도와 다른 side effect가 발생할 수 있으며, React의 단방향, 하향식 데이터 흐름에 위배되므로 읽기 전용 값이어야 한다.
-
React 함수 컴포넌트(React Function Component)에서 state hook을 이용하여 state를 정의 및 변경할 수 있다.
o
-
React 컴포넌트(React Component)에 props를 전달할 수 있다.
o
-
이벤트 핸들러 함수를 만들고 React에서 이용할 수 있다.
o
-
실제 웹 애플리케이션의 컴포넌트를 보고 어떤 데이터가 state이고 props에 적합한지 판단할 수 있다.
o
-
실제 웹 애플리케이션 개발 시 적합한 state와 props의 위치를 스스로 정할 수 있다.
o
아래의 질문을 통해 판단할 수 있다.
Q. 부모로부터 props를 통해 전달되는가? 그러면 state가 아니다.
Q.시간이 지나도 변하지 않는가? 그러면 state가 아니다.
Q. 컴포넌트 안의 다른 state나 props를 가지고 계산 가능한가? 그러면 state가 아니다. -
React의 단방향 데이터 흐름(One-way data flow)에 대해 자신의 언어로 설명할 수 있다.
o
React는 데이터를 전달하는 주체가 부모 컴포넌트이므로 props를 이용하여
하위 컴포넌트로 데이터를 전달할 수 있다. 이는 데이터 흐름이 하향식(top-down)임을 의미하며, 한방향으로 흐르는 단방향 데이터 흐름을 따른다는 의미다. -
JSX 문법의 기본과 컴포넌트 기반 개발에 대해서 숙지한다.
o
-
React Router DOM으로 React에서 SPA(Single-Page Application)을 구현할 수 있다.
o
-
state hook을 이용하여, 컴포넌트에서 데이터를 변화시킬 수 있다.
o
-
props를 이용하여, 부모 컴포넌트의 데이터를 자식 컴포넌트로 전달할 수 있다.
o
-
바람직한 컴포넌트 구조와 state와 props의 위치에 대해 고민한다.
o
-
React에 존재하는 다양한 Hook들을 학습하기
o
과제 React Twittler State & Props
-
click-to-edit ui 적용해보기
-
local state 적용해보기
소감
🔡➡️💻➡️🤓👍
오늘은 강의 자료를 학습하는데 시간이 오래 걸렸다.
한번에 이해하기 어려워서 3번 이상 읽었고,
그래서 과제를 늦게 시작했다.
내일까지 제출이지만 오늘 오후 6시까지 제출은 완료했다.
다만, 이해가 잘 되지 않은 부분은 레퍼런스를 찾아보고,
강의 자료들을 참고하여 작성하였기에 다시 풀어보았다.
그래도 이해가 되지 않는 부분이 조금 남아서
내일 오전 실시간 세션 강의를 듣고 질문해야겠다.
