221203 WIL 항해99 3주차

 1. React 입문 주차 과제 수행

• 이번주는 처음으로 react를 경험해보았다.
• 이번 주차에 배운 중요한 키워드
  1. component
     • component는 react로 구현되는 블록이다.
     • html을 return하는 함수 형태로 되어있다.
     • parent component와 child component로 이루어진 종속관계를 이루어 화면에 표시된다.
  2. rendering
     • 리액트에서 렌더링은 코드로 작성된 각 component가 사용자 화면에 표현되는 것을 말한다.
     • 리액트는 기본적으로 SPA 이기 때문에 한 화면에서 구성된 각 componet가 개별적으로 rendering 된다고 볼 수 있다.
     • 렌더링에는 크게 초기렌더링과 리렌더링이 있다.
       • 초기 렌더링 
         render() 함수가 있는데 아직 이거 왜 쓰는지 모르겠다.
       • 리렌더링이 되는 경우 네가지
         1. Props가 변경되었을 때 즉, 부모 컴포넌트의 데이터가 변경되었을 때.
         2. State가 변경되었을 때 즉, 해당 컴포넌트의 데이터가 변경되었을 때
         3. Context value가 변경되었을 때 context value가 뭔지 알아보기
         4. 부모 컴포넌트가 re-render되었을 때 
  3. props
     • 부모 컴포넌트로부터 받아온 데이터를 말한다.
     • object literal 형태이기 때문에 {props.motherName} 식으로 사용할 수 있다.
     • 부모에서 자식으로 내려줄때  motherName={name} 으로 보내주면 된다.
     • props는 부모로부터 자식으로만 데이터가 전달된다. 단방향이다.
     • 정리하자면 props는 외부에 데이터를 받아 출력하는 것이다.
  4. states
     • component 내부에서 바뀔 수 있는 값
     • state는 '불변성'과 연관이 높다.
     • react에서는 얕은 비교를 수행하기 때문에 배열과 객체같은 참조 자료형의 경우 데이터가 변경되어도 그 변화를 인지하지 못한다.
     • 그렇기 때문에 전개구문을 통하여 배열 복사를 해주고 새로운 값을 입력해줘야 한다.
     • 그리고 메소드로는 filter,map,slice 등과 같이 새로운 배열을 리턴해주는 메소드를 활용해야 한다.

2. React 입문 주차 시험

• 문제의 난이도가 어렵지는 않았다.
• 그러나 전개구문을 사용하는 것을 깜박하면서 중간에 조금 해맸다.
• map 메소드를 배열이 아닌 변수에 사용하면 'map is not a function' 에러가 발생한다.
• 이를 setState([...spread operator, newdata]) 형식으로 사용하면서 해결되었다.