옵셔널체이닝(optional-chaing)

• 옵셔널체이닝이란?

  기존의 &&연산자를 쓰면서 길었던 코드를 간결하게 사용하는 연산자
  &&연산자 =

• 역사

  • 제일처음에는 삼항연산자를 썼다.

  data ? data.fetchProfile : undefined

  data는 동기적으로 받아와야하는 데이터이다. 데이터가 있으나 없어나 모두 적어줘야했다.

  • 그다음 &&연산자를 사용했다

  data && data.fetchProfile

  &&연산자는 데이터가 없을 경우 자동으로 undefined를 반환해준다.
  데이터가 없을 때 따로 div를 쓸 필요가 없으면 else 부분을 쓸 필요가 없다.

  • 최신나온 방법이 바로 옵셔널체이닝

  data?.fetchProfile

  ? 연산자 앞 객체의 참조가 undefined || null 이라면 undefined 를 리턴해준다.
  삼항연산자 &&연산자와 똑같은 기능을 하는 것. 하지만 더 짧다!

널 병합 연산자 (Nullish-coalescing)

• nullish-coalescing 이란?

  왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자이다. 출처 : MDN

data ?? data.fetchProfile

• 거짓의 종류

  0 '' false null undefined

폴더 구조 체계화

📔 Container / Presenter 패턴 (노션참고)

• 너무 효율적이다 보니 많은 회사에서 사용하면서 이름까지 정해짐
• js -> Container
• html -> Presenter 두개의 파일로 나눔(export, import 사용해서 연결시킴)
• 둘다 합치면 component 라고 부른다
• 컴포넌트가 두번이상(여러번) 쓰이면 공통컴포넌트(commons)
• 한번만쓰이면 unit
• 컴포넌트이름은 파스칼케이스 형식으로 짓는다.
• 부모컴포넌트 / 자식컴포넌트 감싸면 부모 감싸지면 자식
• 자식에선 부모로 못올림 ( React에서는 데이터흐름이 단방향이다.)

📔 Props

• props - 부모컴포넌트가 자식컴포넌트에게 넘겨주는 변수/함수
• Contrainer / Presenter 패턴을 위해서는 props 전달이 필수다.
  

게시판등록, 상세정보 container presenter pattern화 하기

📔 변경 전

index.js 안에 js, html, graphql이 한 곳에 다 있었다.

📔 변경 후

container = js 페이지
presenter = html 페이지
queries = graphql 페이지
styels = css 페이지
적용한 페이지

📔 중요포인트

• import, export 신경쓰기
• styles 페이지 -> presenter 페이지
• presenter 페이지, quieries페이지 -> container 페이지
• container 페이지 -> index.js

📔 전체 칸이 채워지지 않았을 때 버튼 색 바뀌는 함수

• container

const [color, setColor] = useState(false); 
// useState 설정 
// 기본값은 false 맨 처음에는 당연히 내용이 안 채워져 있기 때문에
setWriter(event.target.value);
    if (
      event.target.value !== "" &&
      myPassword !== "" &&
      myTitle !== "" &&
      myContents !== "" //모든 칸이 빈칸이 아니면!
    ) {
      setColor(true); // color 값은 true
    } else {
      setColor(false); // 하나라도 빈칸이면 false
    }
    return (
    color = {color} // props 연결을 위한 입력
    )
  }

• presenter

export default function NewWriteUI(props) {
return(
<SubmitButton color={props.color} // props 연결
   등록하기
</SubmitButton>
)}

• styles

export const SubmitButton = styled.button`
  background-color: ${(props) => (props.color === true ? "yellow" : "gray")};
`;
// 화살표 함수를 통해 true면 노란색 false면 회색 입력

📔 오류해결과정

오류 1

• import SideQuizBoardWriteUI from "./SideQuizBoardWrite.presenter"; 에 불이 안들어왔다
• 해결 : import 해왔으면 어딘가에는 써야지 불이 들어온다.

오류 2

• 데이터 등록이 되고 조회도 되나 내용을 쳤을때 null값이 나왔다.
• 해결 :함수는 함수이름대로 쳐 줘야 하는데 onChange= 라고 썼다..

write container에 return (
    <SideQuizBoardWriteUI
      onChangeMyTitle={onChangeMyTitle} // 문제없음
      onChange={onChangeMyContents} // 내용이 적용안되서 null 값으로 간다
    />
  );
}