[React] Component, Rendering

Component

Component

• 소프트웨어를 독립적인 하나의 부품으로 만드는 방법
• HTML 요소를 반환해주는 JavaScript 함수
• 비즈니스 로직 + 시각적인 부분(UI) 적절하게 분리

클래스형 컴포넌트

import { Component } from "react";

class Page extends Component {
	render() {
		return (
			...
		);
	}
}
export default Page;

• Component 상속 필요
• render() 메소드 필요
• props 조회시 this.props 조회
• state lifecycle API 사용 가능
• 단점

  • this가 실행 컨텍스트마다 바뀜

  • 함수형 컴포넌트가 더 간단, Hooks로 state, lifecycle API 사용 가능

    → 권장 X

함수형 컴포넌트

import React from "react";

const Page = (props) => {
	return (
		...
	);
};

• 매개변수로 props 받아옴
• React Element 반환

props

• 읽기 전용 : 순수함수처럼 동작 (변경 X)
• 부모 컴포넌트가 설정하는 값

state

• 컴포넌트 내부에서 바뀔 수 있는 값
• 함수형 컴포넌트 : useState Hook 사용
• const [ 변수, set변수 ] = useState(초기값);

Rendering

Rendering

• HTML, CSS, JS 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정
• 컴포넌트가 현재 props와 state의 상태에 기반으로 화면에 그려지는 것
• React : 단방향 데이터 흐름
  • 항상 부모 → 하위 컴포넌트
• 전역적으로 관리가 필요한 데이터가 존재한다면?
  • 상태관리를 위한 라이브러리 사용
  • Redux, Recoil

컴포넌트 반복

• JS 배열 내장 메서드인 map 사용
• key 필요
  • 컴포넌트 배열을 렌더링했을 때 원소에 변동이 있었는지 알아내기 위한 속성
  • Virtual DOM에서 key값으로 비교
  • 고유값 지정 필요
• key값으로 index 사용은 X
  • 동적인 변화가 있는 배열, 객체에서는 특히 금지
  • 이전 상채와 비교가 어려움

조건부 렌더링

• 삼항 연산자
• early return

  • 장점 : 코드 간결성, 유효하지 않은 경우 먼저 처리

  • 단점 : 함수의 return이 여러 곳에 흩어짐 → 함수 복잡도 증가, 가독성 감소

    const Test = (props) => {
    	if (!props) return <p>빨리 리턴해버리기</p>;
    	return (
    		...
    	);
    }

• 논리 연산자 && ||

Rerendering

Rerendering 조건

• 자신의 state가 바뀔 때
• 부모 컴포넌트가 리렌더링될 때 → useMemo 사용 시에는 props 변화 여부에 따라서만 자식 컴포넌트 리렌더링
  
• forceUpdate 함수가 실행될 때 (강제 리렌더링)
• 컨텍스트가 변경될 때 → 해당 컨텍스트를 사용하는 모든 요소들이 리렌더링
  

state

• 사용 이유 : 변화를 감지하여 화면에 영향을 주기 위해
• Setter 함수 사용하여 변경해야 리렌더링 → state 직접 조작 X