1. 함수 컴포넌트의 장점
- 리랜더링 될 때의 값을 유지한다.
- props에 따른 랜더링 결과를 보장받는다.
- 함수의 모든 장점을 이용할 수 있다.
- 코드가 간결해지고 가독성도 좋다
2. React Hooks
React 16.8버전에 새로 추가된 기능으로, 함수 컴포넌트에서 react state와 생명주기 기능(lifecycle features)을 연동할 수 있게 해줌
이전에 리액트가 겪던 문제들을 해결해주며 클래스 컴포넌트를 사용하지 않고도 함수 컴포넌트에서 상태값 접근과 자식 요소에 접근이 가능해졌다
3. 클래스 컴포넌트와 함수 컴포넌트의 차이
1. 클래스 컴포넌트 :
• class 키워드, render() 메소드가 반드시 필요함
• React.Component를 상속 받아야 한다.
• state, lifeCycle 관련 기능을 사용할 수 있다.
• 메모리 자원을 함수 컴포넌트보다 조금 더 사용한다.
1. state
- 클래스형 컴포넌트의 state는 객체 형식이다.
- constructor 안에서 this.state 초기값을 설정할 수 있다.
- constructor 없이 바로 state 초기값을 설정할 수 있다.
- this.setState 함수로 state의 값을 변경할 수 있다.
2. props
this.props로 통해 값을 불러올 수 있다.
3. event
- 함수 선언시 화살표 함수로 바로 선언 가능하다.
- 요소에 적용할때 this.를 붙여줘야한다.
2. 함수 컴포넌트 :
• 컴포넌트 선언이 매우 간편하다.
• state, lifeCycle 관련 기능을 사용할 수 없었지만 Hook을 통해 사용이 가능해졌다.
• 메모리 자원을 클래스 컴포넌트보다 덜 사용한다.
1. state
- 함수형 컴포넌트에서는 useState 함수로 state를 사용한다.
- useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태
- 두 번째 원소는 상태를 바꾸어 주는 함수이다.
2. props
props를 불러올 필요 없이 바로 호출 가능
3. event
- const와 함수 형태로 선언해야 한다.
- 요소에 적용할때 this가 필요없다.
3. 함수 컴포넌트가 클래스 컴포넌트보다 메모리 자원을 덜 사용하는 이유
-
인스턴스 생성 비용이 없음
클래스 컴포넌트는 인스턴스를 생성할 때마다 생성자를 호출하여 상태(state)를 초기화하고 메서드를 바인딩한다. 반면 함수 컴포넌트는 인스턴스 생성 비용이 없기 때문에 생성자 호출과 바인딩이 필요하지 않다. -
this 바인딩이 필요 없음
클래스 컴포넌트에서는 메서드 내부에서 this 바인딩을 해주어야 한다. 그러나 함수 컴포넌트에서는 this가 필요하지 않다. -
불필요한 렌더링 방지
클래스 컴포넌트에서는 shouldComponentUpdate 메서드를 이용하여 불필요한 렌더링을 방지할 수 있다. 하지만 함수 컴포넌트에서는 React.memo를 이용하여 불필요한 렌더링을 방지할 수 있다. React.memo는 컴포넌트의 props가 변경되었을 때만 렌더링을 실행한다. 이로 인해 불필요한 렌더링을 방지할 수 있다. -
가독성 및 유지보수성이 높음
함수 컴포넌트는 클래스형 컴포넌트에 비해 코드가 간결하고 가독성이 높다. 또한 상태(state)와 생명주기 메서드가 없기 때문에 유지보수성이 높다.
4. 브라우저 렌더링 과정을 설명해주세요.
- 브라우저는 HTML, CSS, 자바스크립트, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답받음
- 브라우저의 렌더링 엔진은 서버로부터 응답된 HTML과 CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합하여 렌더트리를 생성함
- 브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST(Abstract Syntax Tree)를 생성하고, 바이트코드로 변환하여 실행함. 이 때 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합됨.
- 렌더 트리를 기반으로 HTML요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML요소를 페인팅함
