[React] Conditional Rendering, List and Keys, Forms,Lifting State Up,Composition vs Inheritance,Context

1. Conditional Rendering (조건부 렌더링)
   React에서는 상태에 따라 렌더링되는 컴포넌트를 동적으로 변경할 수 있습니다. 아래는 AttendanceBook 예제를 통해 조건부 렌더링과 리스트 구현을 보여줍니다.

코드 예제:

const students = [
    { id: 1, name: "Inje" },
    { id: 2, name: "Steve" },
    { id: 3, name: "Bill" },
    { id: 4, name: "Jeff" },
];

function AttendanceBook() {
    return (
        <ul>
            {students.map((student) => (
                <li key={`student-id-${student.id}`}>{student.name}</li>
            ))}
        </ul>
    );
}

핵심 개념:
map()을 사용하여 배열 데이터를 컴포넌트로 변환.
key 속성은 리스트 항목에 고유한 식별자를 제공해 React가 효율적으로 업데이트를 처리하도록 도와줍니다.
2. Forms
React에서 폼은 상태를 통해 제어되며, 사용자 입력 데이터를 처리할 수 있습니다. SignUp 컴포넌트를 통해 폼 구현 예제를 보여줍니다.

코드 예제:

function SignUp() {
    const [name, setName] = useState("");
    const [gender, setGender] = useState("남자");

    const handleSubmit = (event) => {
        event.preventDefault();
        alert(`이름: ${name}, 성별: ${gender}`);
    };

    return (
        <form onSubmit={handleSubmit}>
            <label>
                이름:
                <input type="text" value={name} onChange={(e) => setName(e.target.value)} />
            </label>
            <label>
                성별:
                <select value={gender} onChange={(e) => setGender(e.target.value)}>
                    <option value="남자">남자</option>
                    <option value="여자">여자</option>
                </select>
            </label>
            <button type="submit">제출</button>
        </form>
    );
}

핵심 개념:
Controlled Components: 입력 필드의 값은 상태(useState)로 관리됩니다.
onChange 핸들러를 사용해 상태를 업데이트.
onSubmit 이벤트로 사용자 입력을 처리합니다.
3. Lifting State Up
상위 컴포넌트로 상태를 끌어올려 여러 하위 컴포넌트에서 공유할 수 있습니다. 아래는 섭씨와 화씨 변환기를 구현한 예제입니다.

코드 예제:

function Calculator() {
    const [temperature, setTemperature] = useState("");
    const [scale, setScale] = useState("c");

    const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature;
    const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature;

    return (
        <div>
            <TemperatureInput
                scale="c"
                temperature={celsius}
                onTemperatureChange={(temp) => {
                    setTemperature(temp);
                    setScale("c");
                }}
            />
            <TemperatureInput
                scale="f"
                temperature={fahrenheit}
                onTemperatureChange={(temp) => {
                    setTemperature(temp);
                    setScale("f");
                }}
            />
            <BoilingVerdict celsius={parseFloat(celsius)} />
        </div>
    );
}

핵심 개념:
상태 끌어올리기: 섭씨와 화씨 입력 값은 상위 컴포넌트에서 관리하여 두 입력 필드가 동기화되도록 구현.
tryConvert 함수로 단위를 변환합니다.
4. Composition vs Inheritance
React는 컴포지션(Composition)을 권장합니다. Card와 ProfileCard를 통해 컴포지션을 사용하는 방법을 보여줍니다.

코드 예제:

function Card({ title, backgroundColor, children }) {
    return (
        <div style={{ padding: 8, backgroundColor }}>
            {title && <h1>{title}</h1>}
            {children}
        </div>
    );
}

function ProfileCard() {
    return (
        <Card title="dChaLee" backgroundColor="#4ea04e">
            <p>안녕하세요, dCha입니다.</p>
            <p>React로 개발 중입니다.</p>
        </Card>
    );
}

핵심 개념:

컴포지션: children을 사용하여 유연한 컴포넌트 구성을 지원.
코드 재사용성이 높아지고 가독성이 향상됩니다.
5. Context
React의 Context API는 전역적으로 데이터를 공유할 때 유용합니다. 아래는 다크 모드 구현을 통해 Context의 사용 방법을 보여줍니다.

코드 예제:
컨텍스트 생성 및 제공

const ThemeContext = React.createContext();

function DarkOrLight() {
    const [theme, setTheme] = useState("light");

    const toggleTheme = useCallback(() => {
        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
    }, []);

    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            <MainContent />
        </ThemeContext.Provider>
    );
}
컨텍스트 사용:

function MainContent() {
    const { theme, toggleTheme } = useContext(ThemeContext);

    return (
        <div
            style={{
                backgroundColor: theme === "light" ? "white" : "black",
                color: theme === "light" ? "black" : "white",
                height: "100vh",
            }}
        >
            <p>현재 테마는 {theme === "light" ? "라이트" : "다크"} 모드입니다.</p>
            <button onClick={toggleTheme}>테마 변경</button>
        </div>
    );
}

핵심 개념:

Context API: 전역 상태를 관리하여 컴포넌트 트리 간 데이터를 쉽게 공유.

useContext로 컨텍스트 값을 가져와 테마 상태를 처리.

오늘의 학습 요약

Conditional Rendering: 조건에 따라 컴포넌트를 동적으로 렌더링.

List and Keys: 리스트 렌더링과 고유한 key 값 사용.

Forms: 상태 기반 입력 필드 관리.

Lifting State Up: 상태를 상위 컴포넌트로 끌어올려 하위 컴포넌트 간 데이터 공유.

Composition vs Inheritance: React의 컴포지션 방식을 활용해 코드 재사용성을 높임.

Context: 전역 상태를 관리하며 데이터를 효율적으로 전달.