코드캠프 4기 - 6일차

5일차 리뷰

폴더정리 가이드

/boards 목록보기

/boards/new 등록하기

/boards/[boardId] 상세보기

 

/board/edit 수정하기로 했을때, 어떤 게시글을 수정할건지 안나온다.

edit 원래 있을것을 꼭 찝어 수정하는 것.

/board/[boardId]/edit 수정하기

---

Optional Chaning vs Nullish-Coalescing

data && data.fetchProfile

data?.fetchProfile

 

조건에 따라 화면에 그린다

 

 

data가 없으면 data.fetchProfile을 보여준다.

default value 형식으로 많이 사용된다

있으면 true / 없으면 fall

 

거짓의 영역

0
''
false
null (프로그래머가 강제로 비워준것)
undefined (원래부터 아예 없는것)
NaN

 

거짓은 거짓이지만 없는것만 있을때 data.fetchProfile 보여주기 (null, undefined)

data ?? data.fetchProfile

 

data && data.fetchProfile 앞에가 참이면 보여준다

data || data.fetchProfile 앞에가 거짓이면 보여준다

data ?? data.fetchProfile 앞에가 비어있을때만 보여준다

---

폴더구조 체계화

Container / Presenter 패턴 (가장 일반적임)

*atomic 패턴 노션에 기록되어 있음*

 

presenter는 보여주는것, (presentaional patter), html(JSX)

container 기능쪽, 자바스크립트

 

return 위쪽 container

아래쪽 presenter

 

불러오는애 부모 컴포넌트

불려가는애 자식 컴포넌트

 

props

props는 자바스크립트 부분 연결 (예 : onClick 함수)

props는 객체( 우리가 만드는것이 아니라, 자동으로 만들어짐 )

 

객체는 값도 담을수 있지만, 함수를 담을수도 있다.

 

//// 폴더 ////

commons 스타일 라이브러리

components

여러 컴포넌트 (조립하는 방식)

자주 사용하는 컴포넌트 = 공통 컴포넌트

한번씩 쓰임 = 개별 컴포넌트

 

(setState) state의 원리, 어떻게 동작하는가?

바뀐 state으로 다시 렌더링되어서 화면에 보여줌

 

문제점 : 

하나 setMyWriter("철수") 하고 임시저장 공간에 myWriter: "철수"

리액트에서는 한번에 업데이트 -> 화면에 한번만 다시그린다

마지막 콘텐츠에 하나만 입력했들때 아직은 비어있는 상태

두번째일때는 ㅐ를 입력하고 그제서야 콘텐츠에 ㄴ 빈에 아니라서 true로 변경