Optional-Chaining vs nullish-coalescing
Optional-Chaining= 조건부 랜더링을 좀 더 편하게 사용하기 위함 (data &&data.fetchProfile => data?.fetchProfile)
앞의 데이터가 참일때, 즉 조회될 때 뒤의 데이터를 랜더링
data || data.fetchProfile
앞의 데이터가 거짓일 때 뒤의 데이터를 랜더링
거짓= { 0, '', false, null, undefined, NaN }
null => 개발자가 일부러 데이터를 비워놓기 위해 사용함
default는 undefined지만 고의로 빈 변수를 설정할 경우 null을 사용해준다
nullish-coalescing
null과 undefined에 대해 조건부 랜더링을 해주는 것을 말한다
{ date ?? data.fetchProfile }
데이터가 false 중에서도 null 혹은 undefined 일 때만 랜더링을 한다.
폴더구조: Container, Presenter 방식
JSX와 html을 나누는 방식을 container(javascript part), persenter(JSX part) 패턴이라고 한다.
container에 import를 통해 presenter 파일을 불러오고 return() 밑의 JSX part에 present 파일의 컴포넌트 제목을 가져온다.
이렇게 파일이 나뉠 경우 javascript part에서 선언한 함수는 적용이 안되는데 이는 props를 활용해 함수를 연동할 수 있다.
Props
부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수 또는 함수를 props라고 한다.
함수 뿐만 아니라 state도 props를 통해 연동이 가능하다.
부모가 자식한테는 물려줄 수있지만 자식에서 부모로 가는 경우 직접적으로 연결되지는 않는다.
리액트의 경우 데이터 흐름이 단방향이기 때문인데 앵귤러에서는 데이터 흐름이 양방향이라 부모 자식간 서로 연동을 할 수 있으나 주고 받는 함수가 많아지면 관리도 어려워지고 에러를 잡기도 힘들다.
** 심지어 앵귤러는 개발이 종료된 상황
setState의 동작 원리
state에 저장된 값이 바뀔 경우 기존의 값을 수정하는게 아니라 새로 바뀐 값으로 리랜더링을 진행하는데 state가 함수 내에서 3번이 바뀌면 3번을 리랜더링하는 셈이다.
리액트에서는 매번 리랜더링 하는게 비효율적이라 임시 저장공간에 해당 과정을 입력해놓고 함수가 종료된 후 최종 결과만을 가지고 랜더링을 진행한다.
즉 코드를 짤 때 함수안에서 변수의 값이 바뀐다면 그때마다 값의 변화가 진행되는게 아니라 함수가 종료될 때의 값이 저장되는 식.
setState는 기본적으로 비동기식으로 동작한다.
