1. JSX

// JSX

// 조건문

function Exam6_1(props) {

    const isLogin = props.isLogin; // 부모에게 전달받은 props 중 isLogin 

    // if(isLogin) {
    //     return <h1>Welcome back!</h1>
    // } else {
    //     return <h1>Please sign up~</h1>
    // }

    return (
        // 렌더링 시 조건문(if/else) 지양
        //  - 삼항연산자
        // 조건문(boolean) ? true일떄 값 : false일 때 값
        isLogin ? <h1>Welcome back</h1> : <h1>Please sign up~</h1>
    )
}

// map 사용법
export function Exam6_2() {
    // map : 배열에서 사용하는 js 내장 함수
    // -> 배열의 모든 요소에 대해 주어진 함수를 호출하고
    //    결과를 새로운 배열로 반환
    const numbers = [1, 2, 3, 4, 5];
    const listItems = numbers.map((number) => <li>{number}</li>);

    return <ul>{listItems}</ul>


}

// 이벤트 만들기(처리하기)
export function Exam6_3(props) {
    
    const handleClick = () => {
        alert('버튼 클릭되었음~');
    }

    return (
        <button onClick={handleClick}>{props.label}</button>
    );
}

export default Exam6_1; // 기본적으로 내보내는 컴포넌트가 Exam6_1이다.

✅ map은 익혀두기

2. Context API

ThemeContext.js

// ThemeContext.js
// 내가 만들고자 하는 Context를 정의할 파일

import { createContext, useState } from "react";


// Context API는 React에서 컴포넌트 트리 전체에 걸쳐 전역적인 데이터를 공유하고 전달하기 위한 방법
// -> 깊이 중첩된 컴포넌트들 간에도 데이터를 간편하게 전달할 수 있다.
// -> 보통 props drilling을 피하기 위해 사용

// 사용 방법
// createContext() 함수를 사용하여 Context 객체를 생성할 수 있음.
// -> Provider와 Consumer를 포함

// 1. Provider : 컨텍스트를 사용하는 컴포넌트들에게 값을 제공하는 역할로,
//               값을 전달할 (자식) 컴포넌트들을 감싸고, 'value'라는 prop을 통해 전달할 값을 지정

// 2. Consumer : 컨텍스트의 값을 사용하는 컴포넌트
//               최근에 React에서는 userContext 훅을 사용하여 컨텍스트 값을 가져와 사용함


// ThemeContext 라는 이름의 새 Context 생성
const ThemeContext = createContext();

// ThemeProvider 컴포넌트 
const ThemeProvider = ({ children }) => {

    // 테마 상태 정의, 초기값 light
    const [theme, setTheme] = useState('light');

    // 테마를 토글하는 함수 정의
    const toggleTheme = () => {
        setTheme(theme == 'light' ? 'dark' : 'light');
    }

    // ThemeContext.Provider 태그를 통해 '상태 theme' 과 'toggleTheme 함수'를 제공
    return (
        <ThemeContext.Provider value={{ theme, toggleTheme }}>
            {children}
        </ThemeContext.Provider>
    )

}

export {ThemeContext, ThemeProvider};

ThemeComponent.js

// ThemeComponent.js

import { useContext } from "react";
import { ThemeContext } from "./ThemeContext";
import './css/style.css'; // CSS 파일 임포트
import ThemeChildComponent from "./ThemeChildComponent";


// 현재 테마 상태에 따라 스타일을 적용하고 보여줄 컴포넌트
const ThemeComponent = () => {

    // useContext Hook을 사용하여 ThemeContext의 값 중 theme 상태값 가져오기
    const { theme } = useContext(ThemeContext);

    // 현재 테마에 따라 클래스 이름 설정
    const themeStyle = theme == 'light' ? 'light-theme' : 'dark-theme';

    return (
        <>
            <div className={themeStyle}>
                현재 {theme} 테마 적용 중입니다!
            </div>

            <ThemeChildComponent /> 
        </>
    );
}

export default ThemeComponent;

ThemeChildComponent.js

// ThemeChildComponent.js

import { useContext } from "react"
import { ThemeContext } from "./ThemeContext"

// 3레벨 자식 컴포넌트 만들기

const ThemeChildComponent = () => {

    const { theme } = useContext(ThemeContext);

    const modeName = theme == 'light' ? '라이트' : '다크';


    return <h1>{modeName} 테마 적용중 </h1>
}

export default ThemeChildComponent