코드캠프 6일차

• 실무적인 폴더구조(Container/Presenter)
• 컴포넌트분리 및 데이터전달(Props)
• 목록 형태의 데이터를 보여주자(Map/Filter)
• 안전한코드를 작성하자(Typescript)
• 규칙을 정해서 협업하자(Eslint/Prettier/Husky)

undefined / null의 차이
둘다 값이 비어있음을 나타낸다.
null은 개발자가 일부러 해당 부분을 비웠음을 의미하는 암묵적 룰로 사용되며
undefined는 의도에 상관없이 비워진부분이다.

폴더구조 체계화

협업을 하는 개발자의 입장에선 하나의 파일의 길이가 길어지면
여러 사람들이 사용할 경우 필요한 부분을 찾기 힘들고 읽기가 힘들어진다.
그렇게 때문에 폴더구조를 바꿔주어 이를 해결한다.

컴포넌트분리 및 데이터전달

Container/Presenter

폴더를 나누는 구조로
BoardWrite.contaniner.js
BoardWrite.Presenter.js

처럼 나누며 .은 나누기 위한 형식이지 이름은
BoardWrite-contaniner.js
BoardWriteContaniner.js
이런식이 되어도 상관없다.

와 같은 형식으로 import와 export를 사용하여 이를 나누며
Javascript 부분의 내용은 Container에
return문 안의 HTML내용은 Presenter에 넣어서 나눈 모습이다.

여기서 Container 부분은 부모컴포넌트에 속하며
import를 통해 불려오는 Presenter부분(=BoardWriteUI)은 자식 컴포넌트에 속한다.

Props

-부모컴포넌트가 자식컴포넌트에게 물려주는 변수/함수-

Container 부분의 변수와 함수들을 Presenter로 넘겨주는 부분이다.

Container 부분에서 제작된 aaa = {handleChangeWriter} 은
Presenter에 선언된 props에 의해 onChange={props.aaa}에 담긴다.

-현재 페이지- 기준
자식(Presenter)이 부모(Container)에게 주는방향은 불가능하며 이를
"데이터의 흐름이 단방향"이다 라고하다.
또한 이는 상대적인 부분이기에 Presenter이 부모컴포넌트가 되고 그 안의 emotion부분이 자식컴포넌트가 될 수도 있다.

export default는 페이지당 하나만 작성할 수 있다.

default로 임폴트 한경우 이름설정이 자유로우며 설정한 이름에 맞춰주면된다

일반적(export const ~~)으로 import 한 경우엔 내용중 선택해야하며 import 부분에 {}가 필요하다.

setState의 동작원리

 const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }

위와 같은 함수가 있다면, setMyContents(event.target.value)에 값을 입력받았다해도
mycontents에 바로 값이 들어가지않고 onChangeContents 함수가 끝날 때 mycontents에 입력받은 값이 적용되기 때문데 바로 mycontents에 입력받은 값이 반영되지 않는다.
따라서

	if(mywriter !== "" && mytitle !== "" && mycontents !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )

부분은 함수가 한번 끝날때 까지 그대로 남게된다.

이는 state의 다시그려주는 기능 때문인데 이를 리렌더링이라한다.

	const onChangeContents = (event) =>{
        setMyContents(event.target.value)

        if(mywriter !== "" && mytitle !== "" && event.target.value !== ""){
            setIsActive(true)
        } else(
            setIsActive(false)
        )
    }

코드를 위처럼 다시 작성해주면 mycontents란 장소의 값이아닌
event.target.value 즉 현재 입력한 값을 바로 가져오기 때문에 실적용이 바로 가능하다.