끄적끄적.. 늦은 5일차

김영탁·2021년 11월 12일
0

오늘은 다른걸 하느라 신경쓰지 못해 밀렸던 블로그 자료를 업로드 중이다.. 이번 벨로그는 조건부 렌더링을 주제로 써보려고 한다.

조건부 렌더링

조건부 렌더링은 특정 조건에 따라서 결과물을 렌더링 하는것을 뜻한다.

조건부 렌더링을 알아보기 전에
우리는 false값을 리턴하는 값에 대해 알아보아야겠다.

false값을 리턴하는 값

  • 0
  • " "
  • false
  • null
  • undefined

위의 값들을 이용해서 false값을 리턴 받을수 있겠다.

Optional-chainingNullish-coalesing

Optional-Chainig
data의 값이 false일 경우 리턴을 위해 사용

Nullish-Coaleing
data의 값이 null이거나 undefined일때 사용

폴더구조 체계화

Container/Presenter 패턴

Container/Presenter 패턴은 많은 기업에서 보편적으로 많이 사용중인 패턴이라고 한다.

그래서 우리도 위의 패턴을 배웠다.

이 패턴에서의 Container은 보여지지 않는 부분 즉 Js의 내용을 가지고 있고
Presenter은 눈에 보여지는 부분 HTML과 JSX문을 가지고 있다.

위의 패턴은 단순히 시각적인 부분만 나누는것이 아닌
물리적인 방법으로 파일을 나눈다
위의 사진을 보면 물리적으로 두개의 파일로 나누어진것을 볼수있다.

각 폴더는 아래의 사진처럼 나뉘게 되는데

쉽게 생각하면 Container가 부모의 역할을
Presenter는 자식의 역할을 수행하는 것을 볼수있다.
쉽게 말하자면 부모 컴포넌트의 역할을 하는 Container가
자식인 Presenter를 불러온다고 생각하면 되는것이다.

그렇다면 한개의 파일을 물리적인 두개의 파일로 나눈것인데
스크립트 문은 대체 어떻게 연동이 되는것일까?

그것은 Props라는 기능을 이용해서 연동한다.
Props는 부모 스크립트의 자바 스크립트를 자식 스크립트에게 연결 해주는 역할을 하는데 이대 객체형식으로 전달해 준다.

내가 배운내용은 여기 까지다.

앞으로 공부를 해보고 과제에 적용해보면서 보완할 부분은 더 보완하겠다.

나의 작은 끄적임 끝.

profile
front-end engineer

0개의 댓글