1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이
2. props와 state의 차이
1. React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 ⭐️
- 클래스 컴포넌트의 경우
- 객체지향 프로그래밍의 구조를 띄고 있으며, state를 초기화하기 위해 constructor(생성자) 함수를 필요로 함
- 생성자 함수를 통해 state를 초기화해야 하기 때문에 함수 컴포넌트에 비해 코드가 길어지고, 사이즈가 커질 수 있음
- state 기능 및 라이프 사이클 기능을 사용할 수 있으며 임의 메서드를 정의할 수 있음
- render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 함
- 함수 컴포넌트의 경우
- Hooks를 사용해 생성자 함수를 통해 state를 초기화하지 않더라도 사용이 가능(useState() 등)
- 선언하기 좀 더 편하고 메모리 자원을 덜 사용함
- 제공되는 hook 함수뿐만 아니라 커스텀 훅을 생성하여 동작 시킬 수 있음
- 프로젝트를 완성하여 빌드한 후 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작음
- Q) 함수형 컴포넌트가 아닌 함수 컴포넌트로 부르는 이유? ⭐️
- A) "함수형 프로그래밍" 과 네이밍이 비슷해 혼란을 야기할 수 있기 때문
근데 함수형 프로그래밍은 순수 함수를 지향하는데 리액트는 훅이 들어가서 사이드 이펙트를 일으키기 때문에 함수 컴포넌트
를 함수형 컴포넌트로 보기는 어려움
2. props와 state의 차이 ⭐️
- props
- 컴포넌트 속성을 설정할 때 사용하는 요소
- props 값은 해당 컴포넌트를 불러와 사용하는 부모 컨포넌트에서 설정할 수 있음
- 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있음
- props를 바꾸려면 부모 컴포넌트에서 바꿔줘야 함
- state
- 컴포넌트 내부에서 바뀔 수 있는 값
- Q) props가 컴포넌트간에 전달받는 것이라고 했는데 자식에서 부모로도 전달할 수 있는가!? ⭐️
- A) NO!! 부모 컴포넌트에서 설정할 수 있으며, 부모에서 자식으로만 데이터를 줄 수 있음
- 자식에서 부모로 데이터 전송하는 방법 = 함수 이용
- 자식은 props를 사용해 부모에게 데이터를 건네줄 수 없음
- 따라서, 부모가 함수를 넣어 props로 자식에게 넘겨주면, 자식이 데이터를 파라미터로 넣어서 호출하는 방식으로 동작함
- 즉!! 부모가 props로 함수를 넣어주면 자식이 그 함수를 이용해 값을 건네주는 방식
'Frontend 📚 > React' 카테고리의 다른 글
[React] 리액트 기술 면접 핸드북 IV - 컴포넌트 라이프 사이클, Hooks etc. (0) | 2024.07.04 |
---|---|
[React] 리액트 기술 면접 핸드북 III - FLUX, 리덕스, state 불변성, 리듀서 불변성, side effect etc. (0) | 2024.06.30 |
[React] 리액트 기술 면접 핸드북 I - virtual DOM, react fiber etc. (0) | 2024.06.27 |
물품대여 서비스 개인프로젝트 (0) | 2024.06.19 |
[코딩애플] 쇼핑몰 프로젝트 Part11 - PWA 셋팅 (0) | 2023.11.01 |