훅스(Hooks)

JOY🌱·2023년 4월 19일

🐳 React

목록 보기

2/5

💁‍♀️ 훅스(Hooks)란,
함수 컴포넌트에서 사용 불가능한 생명주기 메소드의 한계점으로 인해 상태 관리 및 렌더링 이후 시점 컨트롤 등 다양한 문제를 해결하기 위해 만든 함수 집합

👀 useState

💁‍♀️ useState이란,
React 객체 내부에 존재하는 함수형 속성

React.useState() 형태로 호출해서 사용해야하지만 구조분해할당을 이용하여 미리 전역 변수로 선언해두고 나면 React.를 생략하고 useState()로 사용 가능

1) useState의 사용

<body>

    <div id="root"></div>

    <script type="text/babel">

        function Say() {

            /* message라는 상태와 setter 메소드를 배열 구조분해할당으로 할당한 뒤
            message를 '치즈 채팅방🧀'(초기값)으로 초기화 */
            const [message, setMessage] = useState('치즈 채팅방🧀');

            /* 여러 개의 상태들을 한 컴포넌트 내에서 사용해도 됨 */
            const [color, setColor] = useState('block');
            const [backgroundColor, setBackgroundColor] = useState('white');

            const onClickEnter = ()=> setMessage('Hi!🤩');
            const onClickLeave = ()=> setMessage('Bye~🥹');

            return (
                <>
                    <h1 style={{ color, backgroundColor }}>{ message }</h1> {/* value가 key와 같다면 생략 가능 */}
                    <div>
                        <button onClick={ onClickEnter }>입장</button>
                        <button onClick={ onClickLeave }>퇴장</button>
                    </div>
                    <div>
                        <button onClick={ ()=> setColor('#fef3a4') }>노란색</button>
                        <button onClick={ ()=> setColor('#fed0bd') }>분홍색</button>
                        <button onClick={ ()=> setColor('#bdf1fe') }>파란색</button>
                    </div>
                    <div>
                        <button onClick={ ()=> setBackgroundColor('white')}>Light mode</button>
                        <button onClick={ ()=> setBackgroundColor('black')}>Dark mode</button>
                    </div>
                </>
            );
        }


        ReactDOM.createRoot(document.getElementById("root")).render(<Say />);

    </script>
    
</body>

👀 useEffect

💁‍♀️ useEffect이란,
컴포넌트가 렌더링 후에 비동기 작업이나 부수 효과(side effect)를 처리할 수 있게 해주는 Hook

useEffect는 기본적으로 렌더링 직후, 업데이트 직후 호출 됨

컴포넌트가 마운트 해제 되기 직전, 업데이트 되기 직전에 실행할 내용이 있다면 정리(clean-up)를 하는 기능도 수행 가능

이전 effect 내용을 정리하고 난 뒤 새로운 effect가 동작하도록 할 때 사용

이전 effect가 남아있는 상태에서 새로운 effect가 발생하면 메모리 누수나 충돌이 발생할 가능성 있음

componentWillUnmount의 역할과 동일

1) useEffect의 사용

<body>

    <div id="root"></div>

    <script type="text/babel">

        const { useState, useEffect } = React;

        function App() {

            const [count, setCount] = useState(1);
            const [name, setName] = useState('');

            const handleCountUpdate = ()=> {
                setCount(count + 1);
            };

            const handleInputChange = (e)=> {
                setName(e.target.value);
            }

            /* --------------------------------------------------------------------- */

            /* 렌더링(mount&update) 될 때마다 실행되는 useEffect */
            useEffect(()=> {
                console.log('렌더링(mount&update) 될 때마다 실행💩');
            }); 

            /* mount / [count]가 변경될 때만 실행되는 useEffect */
            useEffect(()=> {
                console.log('mount가 되거나 count의 변화🤩');
                /* UPDATE 버튼을 누르지 않아도 input박스 안의 값이 변경될 때마다 useEffect는 계속 실행되므로 비효율적 
                   => 따라서 버튼을 누를 때만 렌더링이 되도록(name아 아닌 count의 값이 변경될 때만 useEffect 실행되도록) 하기 */
            }, [count]); /* []안에 count를 전달해줌으로써 이제부터는 mount가 되거나 count의 값이 변화될 때만 이 useEffect가 실행될 것 */

            /* mount / [name]이 변경될 때만 실행되는 useEffect */
            useEffect(()=> {
                console.log('mount가 되거나 name의 변화🤡');
            }, [name]); 

            /* update를 제외하고 mount가 될 때만 실행되는 useEffect */
            useEffect(()=> {
                console.log('mounting🤖🤖🤖')
            }, []); 

            /* --------------------------------------------------------------------- */

            return (
                <>
                    <button onClick={ handleCountUpdate }>UPDATE</button><br/>
                    <span>count: { count }</span><br/>
                    <input type="text" value={ name } onChange={ handleInputChange }/>
                    <span>이름 : { name }</span>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);

    </script>
    
</body>

2) clean-up

<body>

    <div id="root"></div>

    <script type="text/babel">

        const { useState, useEffect } = React;

        /* Timer 컴포넌트 */
        function Timer({}) {

            useEffect(()=> {
                /* 이곳에 작성한 setInterval()을 정리해주지 않으면, unmount되어도 타이머는 멈추지 않음 */
                const timer = setInterval(()=> {
                    console.log(`타이머 돌아가는중.. ${new Date().toLocaleTimeString()}`);
                }, 1000);

                /* unmount되었을 때 타이머를 멈추려면 return구문에 clearInterval()을 작성하여 정리하기 */
                return () => {
                    clearInterval(timer);
                    console.log('타이머 정상 종료!');
                };

            }, []);

            return (
                <>
                    <span>타이머 시작! 콘솔 확인 :)</span>
                </>
            );
        }

        function App() {

            const [showTimer, setShowTimer] = useState(false);

            return (
                <>
                    {showTimer && <Timer />} {/* : showtimer가 true일 때만 Timer 컴포넌트 실행 */}
                    <button onClick={ ()=> setShowTimer(!showTimer)}>Toggle Timer</button> {/* 버튼 클릭 시 반전 */}
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);

    </script>
    
</body>

3) useEffect의 활용

<body>

    <div id="root"></div>

    <script type="text/babel">

        const { useState, useEffect } = React;

        function TypingGame({ text, isDone, setIsDone }) {

            console.log('TypingGame이 렌더링 되는 순간✨')

            const [input, setInput] = useState('');

            useEffect(
                ()=> {
                    const start = new Date().getTime(); // mount되고난 직후의 시간이 start에 담김

                    return ()=> {
                        const end = new Date().getTime(); // unmount되기 직전의 시간이 end에 담김

                        const interval = end - start;
                        alert(`⏰${ interval }(ms)⏰`);
                    }
                },
                []
            );

            const onKeyPressHandler = (e)=> {
                console.log('onKeyPressHandler가 호출 되는 순간✨')

                if(e.key === 'Enter') {
                    if(text === input) {    // 제시된 text와 input에 입력된 값(문자열)이 같을 때
                        setIsDone(!isDone); // isDone의 값 반전 (아래의 isShow가 바뀜) 
                        console.log('isDone이 반전되는 순간✨')
                    }
                }
            };

            return (
                <>
                    <h1>{ text }</h1>
                    <input
                        type="text"
                        value={ input }
                        onChange={ (e)=> setInput(e.target.value) } // input박스 안의 상태값을 변경하기 위한 이벤트
                        onKeyPress={ onKeyPressHandler }
                    />

                </>
            );
        }

      /* ------------------------------------------------------------------------- */
      
        function App() {

            const [isShow, setIsShow] = useState(false);
            const [isDone, setIsDone] = useState(false);
            const [text, setText] = useState('');

            console.log(`isShow는? : ${isShow}`);
            console.log(`isDone는? : ${isDone}`);
            console.log(`text는? : ${text}`);

            useEffect(
                ()=> {
                    console.log('prompt창에 문자를 입력하는 순간✨')
                    setText(prompt('제시할 문자열 입력 :)'));
                },
                [] // 최초 실행 시에만 작동하면 되므로 mount시에만 작동하도록 설정
            );

            useEffect(
                ()=> {
                    setIsShow(!isShow);
                    console.log('isShow가 반전되는 순간✨')
                },
                [isDone] // isDone의 값이 변화했을 때 isShow의 값을 반전시켜(바로 위의 setIsShow()실행) 렌더링 되는 동작을 바꿈
            );

            return (
                <>
                    { isShow && <TypingGame text={ text } isDone={ isDone } setIsDone={ setIsDone }/>}
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);

    </script>
    
</body>

👀 useReducer

💁‍♀️ useReducer란,
다양한 컴포넌트의 state를 업데이트 할 때 사용하는 Hook

Reducer 사용 시 가장 큰 장점은 컴포넌트 업데이트 로직을 컴포넌트 밖으로 분리할 수 있다는 점

Reducer는 새로운 상태를 만들 때 반드시 불변성을 지켜줘야함 (기존 state의 값을 변경하는게 아니라 새롭게 생성)

1) useReducer의 사용

<body>
    
    <div id="root"></div>

    <script type="text/babel">

        const { useReducer } = React;

        /* reducer() 함수의 첫 번째 인자는 기존 상태 값,
        두 번째 인자는 업데이트를 위해 필요한 정보를 담은 객체를 전달 받음 */
        function reducer(state, action) { /* action : 하고자하는 동작이 무엇인지 타입을 작성 */
            /* 업데이트를 할 때 사용 될 함수 */

            /* action에 전달 된 type에 따라 새로운 state를 갱신할 객체를 생성해서 리턴 (불변성 유지) */
            switch(action.type) {
                case 'INCREMENT' : return { value : state.value + 1}; // 증가 동작
                case 'DECREMENT' : return { value : state.value - 1}; // 감소 동작
                default : return state; // 아무 타입에 해당하지 않을 경우 기존 state 반환

            }
        }

        function Counter() {

            /* useReducer의 첫 번째 인자는 Reducer함수,
            두 번째 인자는 해당 Reducer의 기본 값 */
            /* state는 현재 상태이고 dispatcher는 action을 발생시키는 함수 */
            const [state, dispatcher] = useReducer(reducer, { value : 0 });

            return (
                <>
                    <h1>count : { state.value }</h1> {/* 기본값 0이 화면에 노출 */}
                    <button onClick={ ()=> dispatcher({ type : 'DECREMENT' }) }>1🔻</button>
                    <button onClick={ ()=> dispatcher({ type : 'INCREMENT' }) }>1🔺</button>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);
    </script>
    
</body>

2) form에서의 useReducer 사용

<body>
    
    <div id="root"></div>

    <script type="text/babel">

        /* Reducer를 활용해 input 입력 값 상태 관리 */

        const { useReducer } = React;

        function reducer(state, action) {
            /* 새로운 객체 만들어서 반환 => state에 이것이 업데이트 */
            return { ...state, [action.name] : action.value }; // action.name 처럼 '속성(ex:name)'을 가져올 때는 [] 사용
        }

        function RegistForm() {

            const [state, dispatcher] = useReducer(reducer, { // 두 번째 인자에 name, nickname
                name : '',
                nickname : ''
            });

            const { name, nickname } = state; // state.name / state.nickname 대신 사용하기 위해 구조분해할당

            /* change 이벤트가 발생하면 reducer로 이벤트 발생 객체를 전달 */
            const onChangeHandler = e => dispatcher(e.target);

            return (
                <>
                    <label>이름 : </label>
                    <input type="text" name="name" value={ name } onChange={ onChangeHandler }/><br/>
                    <label>닉네임 : </label>
                    <input type="text" name="nickname" value={ nickname } onChange={ onChangeHandler }/><br/>
                    <h3>입력한 이름 : { name }</h3>
                    <;h3>입력한 닉네임 : { nickname }</h3>
                </>
            );
        };

        ReactDOM.createRoot(document.getElementById("root")).render(<RegistForm />);
    </script>

</body>

👀 useMemo

1) useMemo의 사용

💁‍♀️useMemo란?
연산으로 얻은 값 자체를 기억(memorize) 하기 위해 사용되는 hook

간단한 작업을 할 때 시간이 오래 걸리는 작업을 함께 수행하는 것은 비효율적.
연산을 통해 나온 값을 메모리상에 저장해두고, 해당 값이 변경되지 않을 때는 다시 연산하지 않도록 함

<body>
    
    <div id="root"></div>

    <script type="text/babel">

        const { useState, useMemo } = React;

        const hardCalculator = (number)=> {
            console.log('어려운 계산');
            for(let i = 0; i < 999999999; i++) {
                // blank - 시간과 비용이 드는 계산이라는 의미
            }

            return number + 10000;
        };

        const easyCalculator = (number)=> {
            console.log('쉬운 계산');

            return number + 1;
        }
        
        function App() {

            const [hardNumber, setHardNumber] = useState(1);
            const [easyNumber, setEasyNumber] = useState(1);

            /* 첫 번째 인자는 연산을 수행한 후 반환 받는 값을 리턴 값 형태로 작성
            두 번째 인자는 의존성 배열이라고 하는데, 의존성 배열에 등록한 값의 변화를 감지
            만약 빈 배열을 사용하면 아무것도 감지하지 않기 때문에 첫 로딩 시에만 호출하여 값을 기억함 */
            // hardNumber / easyNumber의 변화가 없으면 return문을 호출하지 않고 기억해둔 값 사용 
            const hardNum = useMemo(()=> { return hardCalculator(hardNumber) }, [hardNumber]); 
            const easyNum = useMemo(()=> { return easyCalculator(easyNumber) }, [easyNumber]);
            

            return (
                <>  
                    <h3>어려운 계산기</h3>
                    <input 
                        type="number" 
                        value={ hardNumber }
                        onChange={ (e)=> setHardNumber(parseInt(e.target.value)) }
                    />
                    <span> + 10000 = { hardNum }</span>
                    <h3>쉬운 계산기</h3>
                    <input 
                        type="number" 
                        value={ easyNumber }
                        onChange={ (e)=> setEasyNumber(parseInt(e.target.value)) }
                    />
                    <span> + 1 = { easyNum }</span>
                </>
            );
        }

      
      ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
</body>

👀 useCallback

💁‍♀️ useCallback이란,
함수를 캐싱하여 불필요한 렌더링을 방지하는 Hook

🙋‍ useMemo와 useCallback의 차이점

useMemo는 Memoization된 값을 반환하는 함수

useCallback은 Memoization된 값이 아닌 함수를 반환하는 함수

useMemo는 함수를 실행해서 그 실행 값을 반환하지만, useCallback은 함수 자체를 반환

1) useCallback의 사용

<body>

    <div id="root"></div>
    
    <script type="text/babel">

        const { useState, useEffect, useCallback } = React;

        function App() {

            const [number, setNumber] = useState(0);
            const [toggle, setToggle] = useState(false);

            /* 함수 생성이 불필요하게 계속 될 때 useCallback을 이용하여 함수를 memorization해서 사용 가능 */
            const printNumber = useCallback(()=> {
                console.log(`current number : ${ number }`);
            }, [number]); // number가 변경되었을 때만 이 함수를 다시 실행하여 printNumber에 담음
            // 빈 배열로 작성 시 최초 로딩될 때 한 번 함수 생성 후 계속 사용한다는 의미

            
            /* useCallback을 활용했기때문에 오직 number가 변경될 때만 userEffect 실행 */
            useEffect(()=> {
                console.log('printNumber 함수 변경!');
            }, [printNumber]);


            return (
                <>
                    <input
                        type="number"
                        value={ number }
                        onChange={ (e)=> setNumber(e.target.value) }
                    />
                    <button
                        onClick={ ()=> setToggle(!toggle) }
                    >
                        { toggle.toString() }
                    </button>
                    <button 
                        onClick={ printNumber }
                    >
                        printNumberState
                    </button>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
    
</body>

👉 useCallback을 사용하지 않았을 때의 문제점

			const printNumber = ()=> {
                console.log(`current number : ${ number }`);
            } 

            /* printNumber가 변경 될 때만 호출 되도록 하는 의도로 작성했지만 printNumber 함수는 객체이고,
            App을 재호출 할 때마다 초기화가 되기 때문에 toggle을 변경할 때도 printNumber가 불필요하게 초기화가 다시 일어남 */
            useEffect(()=> {
                console.log('printNumber 함수 변경!');
            }, [printNumber]);

👉 useCallback 사용 후 해결

 			/* 함수 생성이 불필요하게 계속 될 때 useCallback을 이용하여 함수를 memorization해서 사용 가능 */
            const printNumber = useCallback(()=> {
                console.log(`current number : ${ number }`);
            }, [number]); // number가 변경되었을 때만 이 함수를 다시 실행하여 printNumber에 담음
            // 빈 배열로 작성 시 최초 로딩될 때 한 번 함수 생성 후 계속 사용한다는 의미

            
            /* useCallback을 활용했기때문에 오직 number가 변경될 때만 userEffect 실행 */
            useEffect(()=> {
                console.log('printNumber 함수 변경!');
            }, [printNumber]);

2) 컴포넌트 합성에서의 useCallback

<body>

    <div id="root"></div>
    
    <script type="text/babel">

        const { useState, useEffect, useCallback } = React;

        function App() {

            const [size, setSize] = useState(200);
            const [isDark, setIsDark] = useState(false);

            /* Square 컴포넌트에 전달할 함수 */
            const genSquareStyle = useCallback( // size가 아닌 isDark가 변경될 때는 함수를 실행시키지 않도록 useCallback과 의존성 배열 [size] 사용
                ()=> {
                    return {
                        backgroundColor : '#c2e3f9',
                        width : `${ size }px`,
                        height : `${ size }px`
                    }
                }, [size]
            );

            return (
                <>
                    <div style={{ backgroundColor : isDark ? 'black' : 'white' }}>
                        <input
                            type="range"
                            min="100"
                            max="300"
                            value={ size }
                            onChange={ (e) => setSize(e.target.value) }
                        />
                        <button 
                            onClick={ ()=> setIsDark(!isDark) }
                        >
                            { isDark.toString() }
                        </button>
                        <Square genSquareStyle={ genSquareStyle } /> {/* 만든 함수 전달 */}
                    </div>
                </>
            );

        }

        function Square({ genSquareStyle }) {

            // style이 바뀐게 아니라면 리렌더링 하지 않도록 관리하기 위해 state 생성
            const [style, setStyle] = useState({});

            useEffect(
                ()=> {
                    console.log(`Style 변경!`)
                    setStyle(genSquareStyle()); // 함수를 호출하고 반환된 객체가 setStyle에 저장
                }, [genSquareStyle] // genSquareStyle가 변경되었을 때만 useEffect 실행
            )

            return (
                <div style={ style }></div>
            );
        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>

</body>

👀 useRef

💁‍♀️ useRef이란,
함수형 컴포넌트에서 DOM 요소에 직접 접근하거나, 컴포넌트 내부에서 사용하는 변수 값을 관리할 수 있도록 하는 객체를 반환하는 Hook

1) 지역 변수 사용 시 useRef의 활용

<body>

    <div id="root"></div>
    
    <script type="text/babel">

        const { useState, useRef } = React;

        function Counter() {

            const [count, setCount] = useState(0);
            let variable = 0;
            const countRef = useRef(0); // current : 0 이라는 객체로 반환받음

            console.log('Counter 렌더링 ~')

            const increaseCount = ()=> {
                setCount(count + 1);
            };

            /* useRef가 아닌 지역 변수를 사용한 함수 */
            const increaseVariable = ()=> {
                variable += 1;
                console.log(`variable : ${variable}`) 
                // varible을 변경시키고 렌더링이 된 후 다시 체크하면 초기값으로 돌아가있음
                // 렌더링 될 때마다 값을 기억하지 못 하고 값이 변경되어있는 것
            }

            /* useRef를 사용한 함수 */
            const increaseCountRef = ()=> {
                countRef.current = countRef.current + 1;
                console.log(`current : ${countRef.current}`) 
                // 위의 지역 변수를 사용한 예와는 달리, 다시 렌더링이 되어도 
                // useRef를 활용한 값은 기억되어 콘솔에 출력되고 있는 것을 확인
            }

            return (
                <>
                    <h1> count : { count }</h1>
                    <h1> variable : { variable }</h1>
                    <h1> countRef.current : { countRef.current }</h1>
                    <button onClick={ increaseCount }>count 증가</button>
                    <button onClick={ increaseVariable }>variable 증가</button>
                    <button onClick={ increaseCountRef }>countRef.current 증가</button>
                </>
            );

        }

        ReactDOM.createRoot(document.getElementById("root")).render(<Counter />);
    </script>
    
</body>

2) 특정 input에 focus를 주기 위한 useRef의 활용

<body>

    <div id="root"></div>

    <script type="text/babel">

        const { useState, useEffect, useRef } = React;

        function LoginComponent() {

            /* 하나의 state로 묶어서 관리 */
            const [form, setForm] = useState({
                id : '',
                pwd : ''
            })

            const idRef = useRef();
            console.log(idRef); // 렌더링 이전 동작이기 때문에 최초 출력은 undefined

            useEffect(()=> {
                // 초기 화면 렌더링 후 출력 확인
                console.log(idRef);
                // 포커스 설정
                idRef.current.focus(); // idRef.current : 기억해놔야하는 값이 있을 떄 이런 식으로 사용
            }, []);

            const onChangeHandler = (e)=> {
                setForm({...form, [e.target.name] : e.target.value})
            } 

            return (
                <>
                    <input
                        type="text"
                        name="id"
                        ref={ idRef } /* 연결함으로써 참조 가능 */
                        placeholder="id"
                        value={ form.id }
                        onChange={ onChangeHandler }
                    />
                    <br/>
                    <input
                        type="password"
                        name="pwd"
                        placeholder="password"
                        value={ form.pwd }
                        onChange={ onChangeHandler }
                    />
                    <br/>
                    <button>로그인</button>
                </>
            );
        }
      
        ReactDOM.createRoot(document.getElementById("root")).render(<LoginComponent />);
    </script>
    
</body>

👀 useContext

💁‍♀️ useContext란,
부모 컴포넌트에서 생성한 Context 객체를 사용하여 자식 컴포넌트 간에 데이터를 공유하는 기능을 제공하는 Hook
컴포넌트 합성을 통해 트리 구조가 복잡해질수록 하위 컴포넌트로 props를 전달하기 위해 drilling 발생 가능성이 있음. 이 때 유지보수 및 코드 읽기가 어려워지는 문제가 존재.
context는 React 컴포넌트 트리 안에 전역적으로 데이터를 공유할 수 있도록 고안된 방법으로 context를 사용하면 중간 엘리먼트들에게 props를 넘겨주지 않아도 되고, 유지보수도 수월해짐.
단, 컴포넌트 재사용에 어려움이 생긴다는 문제가 있기 때문에 필요할 때만 사용

1) 다크모드 (non-useContext)

<body>

    <div id="root"></div>
    
    <script type="text/babel">

        const { useState } = React;

        function Header({ isDark }) {

            return (
                <header
                    className="header"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'lightgray',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <h1>WELCOME TO CHEESE WORLD</h1>
                </header>
            );
        }

        function Content({ isDark }) {

            return (
                <div
                    className="content"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'white',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <p>치즈 한 입🧀</p>
                    <p>치즈 두 입🧀🧀</p>
                    <p>치즈 세 입🧀🧀🧀</p>
                </div>
            );
        }

        function Footer({ isDark, setIsDark }) {

            const toggleHandler = () => setIsDark(!isDark);

            return (
                <footer
                    className="footer"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'white',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <button onClick={ toggleHandler }>{ isDark ? 'Light Mode🌞' : 'Dark Mode🌝' }</button>
                    Copyright 2023. Cheese. all rights reserved.
                </footer>
            );
        }

        function Page({ isDark, setIsDark }) {

            return (
                <div className="page">
                    <Header isDark={ isDark }/>
                    <Content isDark={ isDark }/>
                    <Footer isDark={ isDark } setIsDark={ setIsDark }/> {/* Footer에서 다크모드를 설정할 것이므로 setIsDark까지 보내줌 */}
                </div>
            );
        }

        function App() {

            const [isDark, setIsDark] = useState(false);

            return <Page isDark={ isDark } setIsDark={ setIsDark }/>
        }

        
        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
    
</body>

2) 다크모드 (useContext)

<body>

    <div id="root"></div>
    
    <script type="text/babel">

        const { useState, createContext, useContext } = React;

        /* context 객체 생성
        인자로 defaultValue 전달, defaultValue가 없는 경우 null 설정 
        context 객체를 구독하고 있는 컴포넌트를 렌더링 할 때 React는 트리 상위에 가장 가까이 있는 provider로 부터 현재 값을 읽어들임
        이때 적절한 Provider를 찾지 못 할 때 쓰이는 값이 defaultValue */
        const DarkModeContext = createContext(null); // 공용 저장소 생성!

        function Header() {

            /* 구독! */
            const context = useContext(DarkModeContext);
            const { isDark } = context;

            return (
                <header
                    className="header"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'lightgray',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <h1>WELCOME TO CHEESE WORLD</h1>
                </header>
            );
        }

        function Content() {

            /* 구독! */
            const context = useContext(DarkModeContext);
            const { isDark } = context;

            return (
                <div
                    className="content"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'white',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <p>치즈 한 입🧀</p>
                    <p>치즈 두 입🧀🧀</p>
                    <p>치즈 세 입🧀🧀🧀</p>
                </div>
            );
        }

        function Footer() {

            /* 구독! */
            const context = useContext(DarkModeContext);
            const { isDark, setIsDark } = context;

            const toggleHandler = () => setIsDark(!isDark);

            return (
                <footer
                    className="footer"
                    style={
                        {
                            backgroundColor : isDark ? 'black' : 'white',
                            color : isDark ? 'white' : 'black'
                        }
                    }
                >
                    <button onClick={ toggleHandler }>{ isDark ? 'Light Mode🌞' : 'Dark Mode🌝' }</button>
                    Copyright 2023. Cheese. all rights reserved.
                </footer>
            );
        }

        function Page() {

            return (
                <div className="page">
                    <Header />
                    <Content />
                    <Footer /> 
                </div>
            );
        }

        function App() {

            const [isDark, setIsDark] = useState(false);
            /* Provider는 context를 구독하고 있는 컴포넌트들에게 context의 변화를 알리는 역할
            Provider는 value prop을 이용하여 하위 컴포넌트에게 값을 전달
            이 때 값을 전달 받을 수 있는 컴포넌트 수에는 제한이 없음
            prop 하위에서 'context를 구독하는 모든 컴포넌트는 value prop이 바뀔 때마다 다시 렌더링' 됨 */
            /* useContext를 사용하면 props로 내리지 않고 createContext로 만든 Context.Provider를 이용하여
            value에 저장하고 알리고 싶은 값을 넣기 */
            return (
                <DarkModeContext.Provider value={{ isDark, setIsDark }}>
                    <Page />
                </DarkModeContext.Provider>
            );
        }

        
        ReactDOM.createRoot(document.getElementById("root")).render(<App />);
    </script>
    
</body>

👀 custom-hook

💁‍♀️ custom-hook이란,
특정 상태관리나 라이프사이클 로직들을 추상화하여 묶어서 재사용이 가능하도록 제작한 사용자 정의 함수

1) custom-hook으로 'useInput' 정의

<body>
    <div id="root"></div>
    
    <script type="text/babel">

        /* 여러 컴포넌트에서 비슷한 기능을 공유할 경우,
        사용자 정의 custom hook을 작성하여 로직을 재사용 가능 */

        const { useState } = React;

        /* 반복되는 같은 기능을 묶은 함수 정의 (custom-hook) */
        function useInput() {

            const [value, setValue] = useState('');
            const onChange = (e)=> setValue(e.target.value);

            return { value, onChange };
        }

        function App() {

            /* useInput()을 호출하고 각각 다른 { value, onChange }를 받음 */
            const username = useInput();
            const password = useInput();
            const email = useInput();

            console.log(username);
            console.log(password);
            console.log(email);
            
            return (
                <div>
                    <label>이름 : </label>
                    <input type="text" id="username" value={ username.value } onChange={ username.onChange }/>    
                    <br/>     
                    <label>비밀번호 : </label>
                    <input type="password" id="password" { ...password } /> {/* { ...password }는 value={ password.value } onChange={ password.onChange } 와 같음 */}
                    <br/>
                    <label>이메일 : </label>
                    <input type="email" id="email" {...email} />
                    <br/>
                    <h4>usename : { username.value }</h4>
                    <h4>password : { password.value }</h4>
                    <h4>email : { email.value }</h4>
                </div>
            );

        }

        ReactDOM.createRoot(document.getElementById("root")).render(<App />);

    </script>

JOY🌱

Tiny little habits make me

이전 포스트

컴포넌트(Component)

다음 포스트

훅스(Hooks)

🐳 React

👀 useState

1) useState의 사용

👀 useEffect

1) useEffect의 사용

2) clean-up

3) useEffect의 활용

👀 useReducer

1) useReducer의 사용

2) form에서의 useReducer 사용

👀 useMemo

1) useMemo의 사용

👀 useCallback

1) useCallback의 사용

👉 useCallback을 사용하지 않았을 때의 문제점

👉 useCallback 사용 후 해결

2) 컴포넌트 합성에서의 useCallback

👀 useRef

1) 지역 변수 사용 시 useRef의 활용

2) 특정 input에 focus를 주기 위한 useRef의 활용

👀 useContext

1) 다크모드 (non-useContext)

2) 다크모드 (useContext)

👀 custom-hook

1) custom-hook으로 'useInput' 정의

컴포넌트(Component)

비동기(Async)

0개의 댓글