[TIL] 2022년 01월 17일

오늘 배운 TIL은 React 실무를 대비해서 파일 나누기를 배웠다.

 

목차 - 커리큘럼

 

• 실무적인 폴더구조 -> Container / Presenter
• 컴포넌트 분리 및 전달 => Props
• 목록 형태에 데이터를 보여주자 => map 함수 / filter 함수
• 컴포넌트의 재사용성을 높이는 방법 => Axios / Apollo-Client 
• 안전한 코드를 작성하는 법 => Typescript
• 규칙을 정해서 협업 하는 방식 => Prettier / ESLint / Huskey -> 룰을 정해서 깃허브에 올리는 방식선언

 

Day 6 - 목표

• 실무적인 폴더 구조
• 컴포넌트 분리 데이터 전달 => props
• setState는 이런 원리다? => setState 동작원리

Optional-Chaning vs nulish-coalescing

 

Optional-Chaining

data && data.fetchProfile

data?.fetchProfile => 조건을 하나로 줄이는 것

기존의 &&연산자를 사용한 방식에서 ?. 를 이용해 조건을 하나로 줄이는 방법이 있다.

만약 데이터가 없다면?

data || data.fetchProfile == data가 거짓이면 data.fetchProfile 실행 

false는 거짓? => flase만 거짓이 아님

|| (or) 연산자를 사용하고 첫번째로 들어오는 data가 거짓이면 data.fetchProfile을 실행하게 된다.

 

0 -> 거짓
'' -> 비워있는 문자열
false -> 거짓
null;
undefined;
NaN - Not a Number 숫자가 아니다 => 거짓

"" => 비워있는 문자열 -> 거짓
'' => 안에 내용이 있는 것으로 처리하면서 true 가 된다.

null === undefined 둘의 차이점
Javascript에서 비워있을때는 undefined

개발자가 작업하다 let aaa = 3; 에 aaa안에 강제로 비울 경우 null을 사용한다.
같이 개발하는 사람에게 알려주기 위한 null 값 사용

 

nulish-coalescing

거짓을 얘기하는 것이 아닌 비워있는 애들 null과 undefined에 대해서 조건부 렌더링을 해준다.

data ?? data.fetchProfile => data가 null이나 undefined일때 뒤에 fetchProfile을 그려줌

&& || ?? == 주로 && 연산자 ?? 을 사용

Container와 Presenter 파일을 나누다 보면 파일이름이 똑같아지는 경우가 많다

한파일에 사용하는 것은 문제없지만 

 

안에 동작하는 연결이 되지 않았다면 에러가 발생한다. => 물론 안에서는 찾을 수 없으니 파일이 

합쳐지긴 하나 안에 변수자체는 합쳐지지 않았다.

export default function BoardWrite () {
   // 부모 컴포넌트
   const [writer, setWriter] = useState();
  
const handleChanceWriter = (event) => {
  const wirter
}

return (
  <BoardWriteUI /> // 자식 컴포넌트
)
}

이렇게 분리가 되면서 자식과 부모가 되고 불려간 애는 자식 컴포넌트가 된다.

 

컴포넌트는 연결되나 변수와 함수는 어떻게 제어할까

 

Props를 사용한 제어법

export default function BoardWrite () {
   // 부모 컴포넌트
   const [writer, setWriter] = useState();
  
const handleChanceWriter = (event) => {
  const writer = event.target.value;
  setWriter(writer);
}

return (
 // aaa로 자식에게 물려줄 수 있다.
  <BoardWriteUI aaa={aaa} /> // 자식 컴포넌트
 /// 객체로 바뀌고 {aaa}라는 키가 생기고 뒹[ㅔ value가 handleChangWriter라는 함수가 
  // 들어감 그래서 이 객체의 이름이 props가 되는 것 
  // props = { aaa: handleChangeWriter  bbb: writer;} 
  // state에 저장되면서 안에 있는 변수 함수 합칠 수 있다.
)
}

export default function BoardWriteUI(props) {
   return (
     <Wrapper>
     <Title> 게시판 등록 </Title>
     <WriterWrapper>
     <InnerWrapper>
     <Writer 
        type="text"
         placeholder="이름을 적어주세요"
         onChange ={props.aaa} // handleChangeWriter  // wirter
      </Wrapper>
     </InnerWrapper>
    </WriteWrapper>
)
}

Props란?

부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수나 함수다.

 

React에서는 데이터 흐름이 단방향 구조,

Angualr에서는 데이터의 흐름이 양방향 구조이다.

 

Props를 이용한 폴더 구조 나누기

 

먼저 기존에 모든 컴포넌트를 포함한 컴포넌트 자체를 하나로 묶어 선언해준다.

import { useMutation, gql } from '@apollo/client';
import { useState } from 'react';
import { CREATE_BOARD } from '../graph/gaph';
import BoardWriteInput from './boardInput';

export default function BoarderWrite(props) {
    const [myWriter, setMyWriter] = useState('');
    const [myTitle, setMyTitle] = useState('');
    const [myContents, setMyContents] = useState('');

    const [creatBoard] = useMutation(CREATE_BOARD);
    function onChangeMyWriter(event) {
        setMyWriter(event.target.value);
    }

    function onChangeMyTitle(event) {
        setMyTitle(event.target.value);
    }

    function onChangeMyContents(event) {
        setMyContents(event.target.value);
    }

    async function onclick() {
        const result = await creatBoard({
            variables: { writer: myWriter, title: myTitle, contents: myContents },
        });
        console.log(result);
        console.log(result.data.createBoard.number);
    }
    return (
        <>
            <BoardWriteInput aaa={onChangeMyContents} bbb={onChangeMyTitle} ccc={onChangeMyWriter} ddd={onclick} />
        </>
    );
}

컴포넌트가 들어있는 로그인 창이라 가정하고 Input 전체를 감싸는 태그안에 클릭시 이벤트가 발생하는 Onchange변수들을 Input 컴포넌트 자체에 선언해준다!

import React, { useState } from 'react';
import { BoardInput, BoardButton } from './boardStyle';

export default function BoardWriteInput(props) {
    return (
        <>
            이름 : <BoardInput type="text" onChange={props.aaa} /> <br />
            비밀번호 : <BoardInput type="text" onChange={props.bbb} /> <br />
            제목 : <BoardInput type="text" onChange={props.ccc} /> <br />
            내용 : <BoardInput type="text" onChange={props.ccc} /> <br />
            <BoardButton onClick={props.ddd} onChange={props.aaa}>
                등록하기
            </BoardButton>
        </>
    );
}

분리한 Input 컴포넌트는 다시 props로 상태값을 가져와서 하나하나씩 onChange에 선언한 값들을 배치해주면 

 

Input 창 전체에는 이전에 컴포넌트에 상태값을 불러올 수 있다.

import styled from '@emotion/styled';
export const BoardInput = styled.input`
    border: ${({ ddd }) => (ddd ? '1px solid red' : '1px solid yellow')};
`;

export const BoardButton = styled.button`
    background: ${({ aaa }) => (aaa ? 'yellow' : 'blue')};
    border: none;
`;

상태값에 따른 스타일 제어법 만약 onClick을 누르면 스타일이 변경하게 하고싶다면 props를 Button에게 상속시키면서

스타일에서는 상속받은 Input에 onChange 값을 대입해 true와 false를 나누면 된다.