1. Algorithm Basic 11, 12
- 문자열 배열 관련 문제, reduce, filter, lastIndexOf 등을 활용하여 해결
- 배열 좌표 관련 문제, 이중 반복문으로 쉽게 해결
2. React State & Props
-
State
컴포넌트의 사용 중 컴포넌트 내부에서 변할 수 있는 값 -
State vs Props
props는 외부에서 전달받은 값, 외부로부터 전달받아 변하지 않는 값, 읽기 전용 객체
state는 내부에서 변화하는 값, -
<tag attribute={value}/> -
or
<tag>value</tag>>>>props.children으로 하는 방법도 있음 -
useState는 [현재 state변수, state갱신 함수]를 반환한다 useState(초기값)으로 초기값을 전달한다
const [isCheck, setIsCheck] = useState(false)
와 같이 구조분해로 할당할 수 있다.(함수 컴포넌트에서의 사용법) -
React에서 이벤트는 카멜 케이스를 사용한다
-
변경될 수 있는 입력값을 state로 관리하고 업데이트 한다.
-
함수를 바로 호출하면, 컴포넌트가 렌더링 될 때 함수가 실행되므로, arrow function 등을 이용해 반환값으로 함수를 정의하거나 함수자체를 전달해야 한다
arrow function을 사용하여 함수를 정의하여야 컴포넌트의 state에 접근할 수 있다 -
단방향, 하향식 데이터 흐름 원칙
데이터를 전달하는 주체는 부모 컴포넌트 >> 단반향, 하향식 전달
자식 컴포넌트는 전달받은 props가 어디서 왔는지 모른다
상태는 최소화하는 것이 좋다 -
state 판단
props가 전달되는 값 >> state가 아님
시간이 지나도 변하지 않는 값 >> state가 아님
컴포넌트 내의 다른 state, props 등으로 계산이 가능하다 >> state 아님 -
하나의 상태를 기반으로 두 컴포넌트 이상이 영향을 받는다면, 공통 소유 컴포넌트에 상태를 위치해야 한다. 즉 부모 컴포넌트
-
객체를 props로 전달할때는 spread 문법 ...을 사용해야 한다
3. Pair Programming / state & props
- useState, props, state 등을 활용할 수 있었다
- spread 문법이 유용하게 쓰여지는 것을 느꼈다. 객체나 배열에 추가하는 기능은 상태 업데이트를 위해 spread 문법이 꼭 필요해 보인다
