TIL + 26일

리액트 심화 주차에 도달...! 오늘은 새로 지급된 리액트 심화 강의를 들었다.
이제 약간 본격적으로 진짜 리액트를 써보는 느낌...? 컴포넌트를 쪼개고 나누는 것을 배웠다.

컴포넌트가 잘게 쪼개지다 보니 props가 또 헷갈리기 시작...
요번에도 과제 뷰를 그리면서 강의를 듣는게 좋을 것 같아 내일부터는 바로 과제에 돌입하려고 한다..!
그래도 생각보다 컴포넌트 쪼개는게 재밌어서... 오랜만에 두근두근하면서 코딩했다..!

저녁에 항해에서 보물찾기도하고 게임하는 시간을 가져서.. 약간 저녁은 좀.. 팀원분들이랑 노가리까면서 보냈다.. 공부 좀만 하고 자야쥐

✏️ 오늘 배운 개념

1. css의 var()
잘만 사용하면 간편할 것 같다?
https://developer.mozilla.org/ko/docs/Web/CSS/var
2. isRoot
ture로 변환시켜주는 노드
https://github.com/jamesplease/lrud
3. props.children
오늘 정말 많은 사람들을 혼란에 빠뜨렸던 children... 금쪽이는 뭐가 문제니...???
분명 설명을 들었는데도 그래서 이게 뭐라고...???하게 되었는데 직접 코드로 짜고 결과물을 보니까 이해가 되었다.. 너무 행복하다...!!!!!간단하게 말하자면 컴포넌트 태그 사이에 넣은 것들을 조회하기 위해 쓰는 것이었다!!!!!

//App.js

function App() {
  return(
	<Cosmos>
      <Planet name="Earth"/>
       <Planet name="Mars"/>
       <Planet name="Jupiter"/>
      </Cosmos>
  )
}

대충 Cosmos로 감싸진 Planet의 구조의 App.js가 있다고 치자
여기서 Cosmos는 안에 내용물이 없으면 Planet의 화면도 보이지 않게 된다

// Cosmos.js

const Cosmos = ({children}) => {
	return(
	<div>{children}</div>
	)
}

children을 넣어주면 화면에 Planet 컴포넌트가 잘 뜬다
그리고 Cosmos 페이지에서 children 콘솔에 찍어보면
Planet의 props인 Earth, Mars, Jupiter가 찍힌다.

4. defaultProps
요것도 첨엔 이걸 부모에게서 온게 맞나...?이걸 props라 부를 수 있는건가..?하고 조금 헤맸는데 약간 이해했다!
정의는 컴포넌트에 props를 지정하지 않을 때 기본 값을 설정할 수 있다.
그래서 불필요한 오류를 줄여주는 용도라고...!
부모 컴포넌트에서 지정한 props가 없을때 해당 페이지에서 작성한 defaultProps가 적용되는 것이다!
럴수럴수 이럴수가~~~