TIL - 20250830

0830 React Core: Component, Data Flow, and Dynamic Rendering

---

✅ 1. 컴포넌트, JSX, Props: React의 기본 구조

• 컴포넌트(Component): UI를 구성하는 재사용 가능한 독립적인 블록. 함수형 컴포넌트가 주로 사용됩니다.
• JSX (JavaScript XML): JavaScript 내에서 HTML과 유사한 문법으로 UI를 선언적으로 작성할 수 있게 해주는 확장 문법입니다.
• Props (Properties): 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 하향식(Top-Down) 데이터 흐름의 핵심입니다. Props는 읽기 전용(Read-Only)입니다.
  • props.children: 컴포넌트의 여는 태그와 닫는 태그 사이에 있는 내용을 전달받는 특별한 prop입니다.

---

✅ 2. State와 이벤트: 컴포넌트를 동적으로 만들기

• State (상태): 컴포넌트 내부에서 관리되는, 변할 수 있는 데이터입니다. State가 변경되면 React는 컴포넌트를 자동으로 리렌더링합니다.

• useState Hook: 함수형 컴포넌트에서 State를 사용하게 해주는 Hook입니다. const [state, setState] = useState(initialValue); 형태로 사용합니다.

• 객체로 상태 관리: 여러 관련 상태를 하나의 객체로 묶어 관리할 수 있습니다. 업데이트 시에는 스프레드 문법(...)을 사용하여 이전 상태를 복사하고 변경된 값만 덮어써야 합니다.

  const [userInput, setUserInput] = useState({ title: '', amount: '' });
  
  const titleChangeHandler = (event) => {
    setUserInput(prevState => {
      return { ...prevState, title: event.target.value };
    });
  };

---

✅ 3. 상향식 데이터 전달 (Lifting State Up)

• React의 기본 데이터 흐름은 하향식이지만, 자식에서 부모로 데이터를 전달해야 할 때가 있습니다. 이때는 부모가 데이터를 처리할 함수를 자식에게 Props로 전달하고, 자식은 그 함수를 호출하는 방식을 사용합니다.

1. [부모] 함수 정의: const dataHandler = (data) => { ... }
2. [부모] 자식에게 함수 전달: <ChildComponent onSaveData={dataHandler} />
3. [자식] Props로 받은 함수 호출: props.onSaveData(childData);

---

✅ 4. 동적 리스트 렌더링 및 관리

• 배열 데이터를 UI 목록으로 렌더링하고, 사용자의 인터랙션에 따라 목록을 추가/삭제하는 기능입니다. 불변성(Immutability)을 지키는 것이 핵심입니다.

• 렌더링: JavaScript의 map() 메서드를 사용하여 배열의 각 요소를 JSX 엘리먼트로 변환합니다. 이때 각 엘리먼트에는 고유한 key prop을 반드시 지정해야 합니다.

• 항목 추가: 원본 배열을 수정하는 push() 대신, 스프레드 문법(...)을 사용하여 새 항목과 기존 항목을 포함한 새로운 배열을 생성합니다.

  setItems(prevItems => [newItem, ...prevItems]);

• 항목 삭제: 원본 배열을 수정하는 splice() 대신, filter() 메서드를 사용하여 삭제할 항목을 제외한 새로운 배열을 생성합니다.

  setItems(prevItems => prevItems.filter(item => item.id !== itemIdToDelete));

---

✅ 5. 조건부 렌더링과 동적 스타일링

• 컴포넌트의 상태(State)나 속성(Props)에 따라 다른 UI를 보여주거나 스타일을 변경하는 기법입니다.

• 조건부 렌더링:

  • 삼항 연산자: condition ? <A /> : <B />
  • 논리 && 연산자: condition && <A /> (condition이 true일 때만 A를 렌더링)
  • if문과 변수: 복잡한 조건일 때 사용.

• 동적 스타일링:

  • 동적 클래스: 템플릿 리터럴(`)을 사용하여 조건부로 클래스 이름을 추가하는 방식. (가장 권장)

    <div className={`control ${!isValid ? 'invalid' : ''}`}>...</div>

  • CSS Modules: CSS 파일 이름을 *.module.css로 짓고 import하여 사용. 클래스 이름이 고유해져 스타일 충돌을 방지합니다.