조건부 렌더링
false값을 리턴하는 값
0
''
false
null
undefined
Optional chaining
data 값이 false일 경우 리턴하도록 사용
// default value로 사용
data || data.fetchProfileNullish coalesing
data의 값이 null 혹은 undefined 일 때 리턴하도록 할 때 사용
data ?? data.fetchProfile폴더구조 체계화
Container - Presenter 패턴
React의 가장 기본적인 디자인 패턴으로 기존의 싱글파일 컴포넌트 형태로 사용 시 컴포넌트내부에 ui와 로직 api호출들이 점점 많아지게 되면서 가독성이 떨어지는 부분을 보완할 수 있는 좋은 방법이다.
container presenter 패턴은 데이터처리와 데이터출력을 분리하는 것으로 Container에서는 API Request, Exception Error, state변경, redux, dispatch...
Presenter에서는 props, UI... 를 관리하는 것이다
Container에서 처리하거나 받아온 데이터들을 Presenter 컴포넌트에 props로 넘긴다
하나의 컴포넌트 내부에서 api를 통해 데이터를 받아오고, 그 데이터를 컴포넌트 내부의 state로 관리하면서 데이터를 표현하는 구조이다.
비록 지금은 단순해보이지만 데이터를 처리하는 로직과 UI를 표현하는 로직의 길이가 길어지게 될수록 코드의 가독성이 떨어질것이다.
그래서 Container-Presenter 패턴으로 처리와 출력의 역할을 나눠본다면 아래와 같이 나눌 수 있다.
container는 presenter의 부모 컴포넌트이며, container component에서는 api에서 데이터를 받아와 props로 presenter container에 넘겨준다.
presenter container에서는 props로 받아온 데이터에 따라서 엘리먼트를 출력한다. 즉, UI에 관한 작업만 수행하게 된다
Container Presenter 방식의 장점은 데이터 처리부분과 보여지는 부분이 나뉘어 있다는 것이다. 데이터를 보여주는 부분을 수정하고 싶으면 Presenter파일로 가면 되고, 데이터 요청 및 처리에 관련된 코드를 구현하고 싶다면 Container파일로 가서 코드를 작성하면 된다
Props
분리된 컴포넌트의 자바스크립트를 연결시켜주기 위하여 사용하는 것으로, 객체 형식으로 전달해준다.
Emotion Props
emotion의 props도 받아서 style을 변경해줄 수 있다. 다만, emotion에서는 함수 구문이 없어 props를 받아주기 위해서는 ${() => } 로 함수 구문을 만들어 props를 받아주어야한다.
