[React]1주일동안 공부할 기록

Mia:)·2021년 2월 8일
0

클래스형 리액트를 공부하려고 했는데, ㅎㅎㅎ 자료가 없다. 대부분의 강의들은 모두 함수형 유튜브 옛날꺼라도 있나 해서 찾아보는데, 왜 옛날꺼는 검색이 안되고 다 1~2년짜리가 최대였다. 어떻게 검색하나 찾아봤는데, 안나온다 ㅠ ????ㅎㅎㅎㅎ??? ㅠㅠㅠ
그런데ㅋㅋㅋㅋㅋㅋ 옛날에 리액트가 핫하다고 해서, 아무것도 모르고 산 do it 리액트 책이 클래스형으로 써져있는거다 !!!! 다행이다 ㅠㅠ 저번주말 어떻게 공부해야하나 좌절하고 있었는데 다행이다.. 과거의 나 칭찬...
그래서 이번주는 이 책을 완독하는 것으로 목표를 정했다. 나는 책으로 보고, 따라치고, 왜 이렇게 구성해야 하는지를 알려주는 점에서 책으로 공부하는 것이 좋다. 그래야 나중에 코드를 쓸 때, 이 때는 이렇게 쓰라고 했었지 하며, 기억을 더듬어가면서 쓸 수 있더라.. 물론 애정하는 노마드코더 강의도 몇개 샀지만, 양이 너무 많고, 백엔드 부분도 있어서, 필요한 부분 책으로 공부하기!

Error: Objects are not valid as a React child (found: object with keys {name, nationality}). If you meant to render a collection of children, use an array instead.

첫장부터 에러가 나오기 시작했다. 롸..? 그래서 구글링해보니 내가 쓴 잘못된 값때문.

<span>객체값 {objectValue}|</span>

# app.js에서 넘겨준 값은 
objectValue={{ name: 'mia', nationality: 'south of Korea' }}

바로 변수명처럼 object인데 저런식으로 써주니 에러가 난것. 그러니까
=> objectValue.name 으로 해야하는데, object자체로 넣어서 에러가 난 것이다.!

<ChildComponent boolValue > // parent component
<span>{boolValue ? 'true' : 'falsy값에 undefined'}</span>

결과는 'true'

<ChildComponent> // parent component

결과는 'falsy값에 undefined'

자바스크립트에서 undefined와 false는 조건문에서 동일하게 취급되어 생략하는 방법으로 전달 할 수 있음! true값을 보내고 주고 싶으면 프로퍼티 이름만 선언해도 된다.

state값을 직접 변경하면 안되는 이유는 render() 함수로 화면을 그려주는 시점은 리액트 엔진이 정하기 때문. 즉 내가 state 값을 직접 변경해도 render함수는 새로 호출되지 않음. setState함수를 호출하면 state 값을 변경하면 리액트 엔진이 자동으로 render함수를 호출하므로 화면에 변경된 state값을 출력한다고함!

state = {
    products: [storeProducts],
    detailProduct: detailProduct,
  }

길이가 1인 array

  state = {
    products: [...storeProducts],
    detailProduct: detailProduct,
  }

길이가 8개인 array

0개의 댓글