Boot.React Day6

01. 옵셔널 체이닝 [?]

• 기존의 &&를 간단히 만든 조건부 렌더링입니다.
  
• 옵셔널 체이닝의 의미
  • data가 있으면 fetchboard를 가지고와 라는 뜻입니다.
  • 옵셔널 체이닝은 저 data가 들어올때까지 기다리지 않고 비동기처리를 합니다. 따라서 data가 들어오지 않아도 밑으로 코드를 읽어나가기 때문에 다른 부분은 정상적으로 렌더링 됩니다. 그러다 data가 들어오면 data를 반영해 다시 렌더링을 해줍니다.

• 만일 data가 없을때 그려줘야 한다면?
  • || 를 사용합니다.

    <ex>
    data||data.fetchBoard
    //data가 없으면 data.fetchBoard를 그려줘

    #잠깐
    삼항연산자가 길어서 효율적으로 나온게 옵셔널 체이닝이라는데 그럼 삼항 연산자는 더이상 사용하지 않나요?
    -> 리턴값 않에는 if문을 사용 할 수 없어서 삼항 연산자를 사용하는 경우가 종종 있습니다.

02. 실무용 폴더구조

• 폴더구조는 회사마다 다릅니다. 따라서 실무를 나가셔서 파일을 어떻게 분리하는지 파악을 해주시는게 좋습니다.
  
• container : javascript 부분(return 위에)
• presenter : UI부분
  • 컴포넌트 분리하면 이렇게 됩니다
    
  • 이후에 index.js에 붙여주셔야 합니다.
    
  • 이렇게 컴포넌트를 분리 후 index.js에 최상위 컴포넌트를 데려와서 붙이고 export해줘야 정상 작동 합니다.
  • import해오는 컴포넌트가 자식 컴포넌트 입니다.
  • 이렇게 컴포넌트를 분리하게 되면 원래 사용했던 함수와 state들을 갑자기 사용할 수 없게됩니다.
    그래서 우리는 props를 사용해야합니다.

03. props

• 부모 컴포넌트가 자식 컴포넌트에게 물려주는 변수, 함수(return 밑에)
  *변수대신에 state라고 해도 무방합니다.
• props를 넘겨주는 방법
  1. 부모 props 내려주기
  
  2. 자식에서 props 받기
  

#잠깐

• 비구조 할당에 대하여(=구조분해)
  -> 배열과 객체를 해체하여 안에 있는 값을 사용하는 것 입니다.
  < ex >

  let people = {name : "혜원",age : 26}
  // 우리가 원래 객체의 키값을 꺼내올 때 = people.name , people.age
  // 비구조 할당 시
  const {name,age} = people
  name => "혜원"
  age => 26

const {name,age} 어디서 많이 보지 않으셨나요?
맞습니다. const [state,setState]와 비슷한 형태입니다.

• props에 비구조할당 사용해보기
  • 부모 컴포넌트

    import Child from '파일위치'
    const Parent = ()=>{
     return(
    	 <div>
       	    <Child name={"혜원"} fvcolor={"black"} age={26}/>
     	 </div>
     	)
     }

  • 자식 컴포넌트

    //필요한게 name,age이므로 비구조 할당으로 해당 부분만 따로 떼어올 수 있습니다.(하지만 전체를 받아오는 거라면 props를 사용하시는걸 추천 드립니다.)
    const Child = ({name,age})=>{
    return(
    	<div>
          안녕하세요 {age}살 {name}입니다.
    	</div>
    	)
    }

04. emotion에 props 던지기

1. 부모 컴포넌트에서 props 넘겨주기(위의 방법과 같다.)
2. 스타일 컴포넌트에서 props 받기
   

• 스타일 컴포넌트에서 스타일을 작성 하는 부분은 백틱(``)으로 묶여 스트링 처리 되기 때문에 ${}로 불러와야 합니다.