6일차 / 폴더구조 체계화, props

5일차 포트폴리오 코드리뷰

템플릿 리터럴

(/boards/ + {result.data.createBoard._id})
=> (백틱/boards/${result.data.createBoard._id}백틱)

await 를 달아줘야 응답이 올때까지 기다린다.
이걸 붙이려면 async를 짝꿍으로 붙여줘야한다

게시글 구조 잡기

/boards : 게시글 목록
/boards/new : 게시글 작성
/boards/[boardId]
/boards/[boardId]/edit : 몇 번글을 수정해야하는지 알아야하기 때문에 [boardId] 필요

삼항연산자

{ 조건 ? 참 : 거짓 }
코드가 길어지면 ?나 :를 찾기 어려워지기 때문에 한 줄 정도로 쓰는 것이 적합하다.

---

조건부 렌더링

data && data.fetchProfile (옵셔널 체이닝: data?. fetchProfile) => 참이면 뒤가 실행된다.
data || data.fetchProfile => 거짓이면 뒤가 실행된다.

[거짓]
0 => number (-1, 2, 3 모두 참, 0만 거짓)
'' => string (' ': 참(스페이스가 들어가 있기 때문))
false => boolean
null => 비어있음(일부러 비워둔 느낌을 준다, 암묵적 룰)
undefined => 비어있음(빈 값)
NaN

nullish-coalescing

data ?? data.fetchProfile => null과 undefined일때만 뒤를 실행 (최근 문법)

example)

사과" && "안녕하세요"
'안녕하세요'
=> 참이기 때문에 뒤를 실행

"" || "반갑습니다!!!"
'반갑습니다!!!'
=> 거짓이기 때문에 뒤를 실행

"사과" || "반갑습니다"
'사과'
=> 참이기 때문에 앞을 실행


0 || "안녕하세요!!"
'안녕하세요!!'

false || "안녕하세요!!"
'안녕하세요!!'

null || "안녕하세요!!"
'안녕하세요!!'

undefined || "안녕하세요!!"
'안녕하세요!!'
=> 거짓이기 때문에 뒤를 실행 

null ?? "안녕하세요"
'안녕하세요'

undefined ?? "안녕하세요"
'안녕하세요'

0 ?? "안녕하세요"
0
=> null과 undefined일때만 뒤를 실행

&&과 ||은 많이 쓰이니 꼭 알아두어야 한다.

폴더구조 체계화

Container(Logiic(Js)) / Presenter(JSX(Html)) 패턴

BoardWrite.container.js
BoardWrite.presenter.js

파일은 나눴지만 합쳐지게 하기 위해
Presenter 파일을 Container에 태그로 import한다.

불려간 애가 자식, 불러온 애가 부모

props

부모 컴포넌트(container)가 자식 컴포넌트(presenter)에게 물려주는 변수/함수

container에 있는 함수를 presenter로 넘겨주는 방법

container/
aaa= {handleChangeWriter}라고 입력하면
(props = { aaa: handleChangeWriter } 라는 객체가 만들어짐)

presenter/
export...(props) 프롭스로 전달하고
onChange={props.aaa}를 입력하면 데이터가 넘어온다.
(onChange={handleChangeWriter})

부모만 자식한테 내려보내줄 수가 있고, 반대는 허용되지 않는다.
React는 데이터의 흐름이 단방향이다.

container에서 presenter로 데이터를 물려주는 것처럼
presenter이 부모, emotion이 자식이므로 데이터 전달 가능

객체에 함수가 통째로 들어갈 수도 있다
${(props) => props.isActive ? "yellow" : "none"};

export를 묶는법

export를 전부 불러오는 명령어

import * as 이름 from "경로"

import한 후 태그앞에 <이름.태그이름>으로 만들 수 있다.

setState 동작

why? state가 바뀌면 화면에 그려진 내용이 같이 바뀐다.
state가 바뀌게 되면 값을 입력했을 때 화면 전체가 다시 그려진다. => 리렌더링
ㅊ 입력 => 함수가 끝나야 event.target.value 작동 => ㅊ 입력이 되면 화면이 다시 그려진다.
왜 함수가 끝나야 리렌더링을 할까? => 리렌더를 최소화 하기 위해서

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

    if(myWriter !== "" && myTitle !== "" && myContents !== ""){
      setIsActive(true)
    } else {
      setIsActive(false)
    }
  };

event.target.value에 입력이 들어갔지만 함수가 끝나지 않았기 때문에 myContents는 아직 빈 값이다. 따라서 한단계 느리게 동작하게 된다.

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

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

이렇게 바꿔주면 정상적으로 동작한다.