본문 바로가기
TIL/코드스테이츠 TIL

코드스테이츠 소프트웨어엔지지어링 부트캠프 +33일

by 안뇽! 2021. 8. 20.
반응형

오늘 한 것

리액트 개념정리

https://wnsdufdl.tistory.com/66

 

리액트 key

Key 리액트에서 key 는 어떤 항목을 변경, 추가 삭제할지 식별하는 것을 돕는다. 리액트에서 map() 함수를 이용해서 배열을 반복 실행할 수 있다. 다음의 예시를 보자. const numbers = [1, 2, 3, 4, 5]; const l

wnsdufdl.tistory.com

https://wnsdufdl.tistory.com/65

 

리액트 조건부렌더링 정리

&&를 이용한 조건부 렌더링 삼항 연산자를 이용한 조건부 렌더링 null 을 이용하여 특정 조건에서 컴퍼넌트 렌더링 하지 않기 1. && 를 이용한 조건부 렌더링 A && B // A와 B가 둘다 true일때 true, 하나

wnsdufdl.tistory.com

 

착각

공휴일을 제외하고는 첫 solo-day이다. section 2 맛보기 예습을 할까 복습을 할까 고민하다 복습을 선택했다.

잘한일이다.

 

HA를 준비하면서 적어도 useState, Event함수 에 관한 내용은 어느정도 익혔다고 생각했다.

나의 완벽한 착각이었음

 

리액트 공식홈페이지에 있는 주요 개념 챕터를 공부했다.

 

결과 화면만 눈으로 먼저 보고 빈 create-react-app 에 똑같은 결과가 나오도록 코딩을 했다.

 

쉽게 쉽게 할 수 있을 줄 알았지만 아니었다..

 

하마터면 react 기초부분에 빵꾸가 난 채로 section2로 넘어갈 뻔 했다.

 

그 과정에서 알게 된것은 바로

  • 다른 배열들을 여러개 만들때는 key가 중복되어도 상관 없다.
  • 배열 map()의 리턴문에서도 가장 큰 태그 하나로 이루어져 있어야 한다. 왜냐면 jsx 문법이니깐 
  • 조건문에 return null 을 넣으면 원하는 조건에서 컴퍼넌트를 랜더링 하지 않을 수 있다.

라는 것을 깨달았다.!

 

 

이제부턴 공식문서로 공부를 해야겠다.

 

반응형