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

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를 사용할 때는 이러한 기본 개념들의 확실한 이해가 필수적입니다.