리액트 초보
강의 : 링크텍스트
책 추천 : 리액트를 다루는 기술
멘토님한테 추천받은 책 구입했습니다...
너무 두껍지만 한챕터 한챕터 하나씩 보도록 노력하겠습니다....
Class/Functional Component
Functional Component(함수형 컴포넌트)
참고 사이트 : 링크텍스트
JSX를 return문을 사용해서 반환합니다.
동적인 데이터를 다루는 state를 사용할 수 없습니다.
React.Component에서 제공하는 기능을 사용하기 위해서는 손으로 모두 작성해서 사용해야 합니다.
Class Component
참고 사이트 : 링크텍스트
React.Component를 상속받기 때문에 리액트에서 제공하는 기능들을 모두 내것처럼 사용할 수 있습니다.
동적인 데이터를 다루는 state를 사용할 수 있습니다.
함수가 아닌 클래스이기 때문에 return문을 사용하지 않습니다.
대신 React.Component에서 제공하는 render() 함수를 사용해서 JSX를 반환합니다.
render() 함수는 직접 정의하지 않았지만 리액트 컴포넌트를 상속 받았기 때문에 사용 가능합니다.
왜 Functional을 사용해야 하는가??
- 훨씬 코드가 짧아집니다.
- 재사용이 쉽습니다.
- 로직도 재상용하기 쉽습니다.
- 유지보수도 좋습니다.
- 가독성이 좋습니다.
앞으로 새로 개발을 해야할때면 Functional을 사용하는 것이 좋습니다.
하지만 Class Component도 알아두자(life cycle위주!!!)
관련 면접 질문
1. 라이프 사이클 순서와 역할
리액트에서 라이프 사이클은 총 3가지로 나뉘어집니다.
Mount: 컴포넌트 실행 후 DOM이 생성되고 웹 브라우저에 나타나는 것
Update: 컴포넌트를 업데이트 할 때
Unmount: 컴포넌트를 DOM에서 제거할 때
출처: https://tigger.dev/211 [개발 여행]
- 라이프 사이클 중 써본 메소드가 뭐가 있는지?
- 함수형 컴포넌트와 클래스형 컴포넌트의 차이
