Next.js

React 기본 용어 및 개념 (Component, Props, State, 랜더링....) 핵심 흐름

code2772 2024. 11. 9. 16:20
728x90
반응형

0. React Component의 핵심 흐름

React Component는 크게 4가지 핵심 요소로 구성되며, 이들이 서로 상호작용하며 동작합니다:

1. Props와 State
Props: 부모가 자식에게 전달하는 데이터 State: 컴포넌트 자체적으로 관리하는 데이터 이 두 데이터는 Data Flow를 통해 앱 전체의 데이터 흐름을 만듭니다.

2. Lifecycle (생명주기)
컴포넌트가 생성되고(mount), 업데이트되고(update), 제거되는(unmount) 전체 과정을 관리 각 단계에서 필요한 작업을 수행할 수 있게 해줍니다.

3. Rendering
Props나 State가 변경되면 컴포넌트를 다시 그립니다. Virtual DOM을 통해 변경사항을 효율적으로 실제 화면에 반영합니다.

4. Data Flow (데이터 흐름)
Props와 State의 변경이 컴포넌트 트리를 따라 아래로 흐르며, 이 변경사항이 다시 Rendering을 통해 화면에 반영되는 단방향 흐름을 가집니다. 

 

1. 기본 용어 설명

1.1 React 핵심 개념

  • Component(컴포넌트): UI를 구성하는 독립적이고 재사용 가능한 부품
// 함수형 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 클래스형 컴포넌트
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
  • Props(속성): 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
// Props 전달
<Welcome name="Sara" age={25} />

// Props 받기
function Welcome(props) {
  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
}
  • State(상태): 컴포넌트 내부에서 관리되는 데이터
const [count, setCount] = useState(0);// 초기값 0// 상태 업데이트
setCount(count + 1);

 

1.2 렌더링 관련 용어

  • Virtual DOM: React가 실제 DOM 업데이트를 최적화하기 위해 사용하는 가상의 DOM 트리
  • Render: 컴포넌트의 UI를 그리는 과정
  • Re-render: 컴포넌트의 상태나 속성이 변경되어 다시 그려지는 과정

 

1.3 컴포넌트 라이프사이클

  • Mount: 컴포넌트가 처음 DOM에 삽입될 때
  • Update: props나 state가 변경될 때
  • Unmount: 컴포넌트가 DOM에서 제거될 때

 

2. 고급 개념

2.1 HOC 관련 용어

  • WrappedComponent: HOC에 의해 감싸지는 원본 컴포넌트
const withAuth = (WrappedComponent) => {
// HOC 로직
  return function(props) {
    return <WrappedComponent {...props} />;
  }
};
  • Composition(합성): 여러 개의 HOC를 조합하는 것
const enhance = compose(
  withAuth,
  withStyles,
  withLogging
);

 

2.2 Props 관련 특수 용어

  • Props Spreading: props 객체를 펼쳐서 전달
function Component(props) {
  return <ChildComponent {...props} />;
}
  • Props Drilling: props를 여러 계층의 컴포넌트를 거쳐 전달하는 현상
// 피해야 할 패턴
<GrandParent data={data}>
  <Parent data={data}>
    <Child data={data} />
  </Parent>
</GrandParent>

 

2.3 기타 중요 개념

  • JSX: JavaScript XML의 약자로, React에서 사용하는 HTML과 유사한 문법
const element = <h1>Hello, {name}</h1>;
  • Hook: 함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있게 해주는 함수
// 상태 관리 Hook
const [state, setState] = useState(initialState);

// 부수 효과 Hook
useEffect(() => {
// 부수 효과 코드
}, [dependencies]);

 

3. 주의사항과 Best Practices

 

3.1 Props 사용 시 주의사항

  • props는 읽기 전용(불변)
  • props 이름은 camelCase 사용
  • 필수 props는 PropTypes로 검증
MyComponent.propTypes = {
  name: PropTypes.string.required,
  age: PropTypes.number
};

 

3.2 State 사용 시 주의사항

  • state 직접 수정 금지
// 잘못된 방법
this.state.count = 1;

// 올바른 방법
setState({ count: 1 });

 

3.3 컴포넌트 작성 시 주의사항

  • 단일 책임 원칙 준수
  • 가능한 작게 유지
  • 명확한 이름 사용

이러한 용어들과 개념들을 잘 이해하고 있으면 React 애플리케이션을 개발할 때 더 효율적이고 유지보수가 용이한 코드를 작성할 수 있습니다. 특히 HOC를 사용할 때는 이러한 기본 개념들의 확실한 이해가 필수적입니다.

반응형