44일차 TIL 210507 React3

1. 파도파도 양파같은 리액트…🧄

  • JSX 란? js를 확장한 문법이다. html 이 섞여있다. {} 안에 js 표현식을 사용할 수 있다.
  • 한 컴포넌트의 state 는 다른 컴포넌트의 state 에서 수정할 수 없다.
  • 리액트는 바벨을 이용해서 jsx 를 컴파일 하는 것
  • 컴포넌트에서 변화가 필요한 데이터는 state 로 정해야 한다.
  • 하위 컴포넌트(Local state) : 페이지 전체에 영향을 끼치지 않는것
  • 전역 컴포넌트(Global state) : 페이지 전체에 영향을 주는 상태 ( ex. 다크모드 변경)
  • Props : 상위 컴포넌트에서 하위 컴포넌트로 값 전달해주는 것. Read-only : 변할 수 없다. 하나의 객체.
  • 상태는 은닉화 되기 때문에 자식 컴포넌트의 상태를 부모 컴포넌트가 알 수 없다.
  • this 는 new 생성자로 정해지는 경우를 제외하고 모두 부모 객체를 참조 한다.
  • setState() 는 객체의 깊숙한 곳까지 확인 하지 못한다. 객체분해 할당시 주의!!

1-1. 생명주기 메서드😇

image

  • constructor : 해당 컴포넌트가 마운트 되기 전 호출된다.
  • render : 데이터가 변경되어 새 화면을 그려야 할 때 자동으로 호출된다. render() 함수가 반환하는 Jsx 를 화면에 그린다.
  • componentDidMount() : render() 가 Jsx를 화면이 그리고 난 다음에 호출된다 (=컴포넌틔 출력물이 DOM 에 렌더링 된 이후 호출된다) 컴포넌트가 화면에 모두 표현된 이후 해야 하는 작업들을 여기서 진행한다.
  • ComponentDidUpdate() : DOM 의 정보를 변경할 떄 사용한다.
  • ComponentWillUnmount() : 컴포넌트가 소멸되기 직전 호출되는 함수.

1-3. 라이프 사이클

  • 컴포넌트는 중요한 일이 일어날때마다 렌더를 한다.
  • 컴포넌트 기준 중요한 일

image

  • 클래스 컴포넌트에만 라이프 사이클 메소드 사용이 가능하다.
  • 종류 3가지
  • componentDigMount() : 화면에 등장한 후 호출된다.
  • componentDidUpdate() : 새로운 상태를 갖고 난 후 호출된다.
  • componentWillUnmount() : 화면에서 사라지기 전 호출된다.
  • 왜 필요할까 ? 상태가 변화 되었을때, 처음 마운트 되었을 때 등 비동기 요청을 보낼 떄가 많다.
  • 비동기 호출을 할 경우 이 상태를 가지고 다른 작업을 해야 할 때 이 안에서 작업을 정해줄 수 있다 (?) 이부분이 잘 이해가 안간다 …

Updated: