2주 사이클 반복이니까 열심히..
거짓, 조건부렌더링, 폴더구조 체계화, props, emotion props
코드 리딩 능력을 기르자
Optional chaining
조건을 더욱 간단히 표시해준 것
data && data.fetchProfile
앞에가 참일때만 보여줘
data || data.fetchProfile
앞에 data가 거짓이면 뒤에 걸로 보여줘(디폴트 밸류로 많이 쓰임) 있으면 true, 없으면 false임.
nullish - coalescing
data ?? data.fetchProfile
앞에가 비었을때만(null, undefined일때만) 보여줘
거짓이 그래서뭐죠???
0 - 숫자에서
'' - 문자열에서
false - 거짓
null - 비어있다(의도적으로 비운 것)
undefined - 비어있다(보통의 경우)
..등등
폴더구조 체계화
폴더구조를 체계화시키자! Container(기능쪽: 자바스크립트)/ Presenter(보여주는쪽 : html, JSX) 패턴
회사별로, 서비스에 따라 다를 수 있음
코드로 보면??
이렇게 나누면 안보이니까 합치기가 필요함 return (<BoardWriteUI쪽부터) export, report 필요
Props
그런데 파일을 두개로 나눴을 때 알맹이들이 연결이 안되고있는것 같음(색깔만 봐도 흐릿함)
이럴 때 props가 자동으로 생성 됨
container에서 객체를 만들면 자동으로 Presenter로 가게됨
prop로 값도 담을 수 있고 함수도 담을 수 있음
연결이 어떻게 되는지 유의
실습하기
src/commons, src/components로 나눠서 제작하는 방식
등록페이지 안에 components들을 불러와서 제작하는 느낌
여러페이지에서 쓰는 애들을 공통 컴포넌트,
한개패에지에서 쓰는 애들을 개별 컴포넌트, 둘을 구별하기 위해 폴더 추가 src/components/commons, src/components/units
일단 쪼개
그리고 합치면?
1. import로 presenter 가져옴
2. return 부분에 불러온거 넣음
3. 기능들도 합쳐야됨
![]
presenter에도 연결
- 컨테이너를 page에 담기
page/index.js 안에 컨테이너, 컨테이너 안에 Presenter를 담는 느낌
export default 부터 하면
import BoardWriteUI from ... 에서 받기
디폴트가 정해진 것이 하나기 때문,{}가 없음
emotion에서 import export 하게되면 한번에 여러개이기 때문에 {}로 지정해서 어느 것인지 보여줌
폴더 규칙, 나누는 원리에 대해서 생각하기
그럼
gql, emotion은 어떻게 뺄까요?
export, import 변경에 유의
emotion
export, import 변경, 대소문자 맞는지 확인해보기
버튼 누르면 색깔 바뀌게 바꾸기
emotion도 props로 받을 수 있다는 것을 알아두기
-> 대신 함수로 만들어줘야함
2단 프롭스..
자동으로 바꾸기
(세번 반복)
State 의 랜더링
함수를 늘어놓으면 임시 저장공간에 결과를 저장해놓고
나중에 한번에 모아서 출력해서 보여줌.
만약 다들 바뀌면 계속해서 출력해서 보여줄 수 없으니까 -
function onChangeMyContents(event){
setMyContents(event.target.value)
if(myWriter !== "" && myTitle !== "" && myContents !==""){
setMyQqq(true)
}
}그래서 글자 하나만 입력될 시 myContents에서는 아직 안들어갔는데 if에서 체크하니까 없는 값으로 나옴, = 바뀌지 않음
