[2023.02.06] 개발자 교육 94일 차 : 강의-React 기초 학습(문서 참고) [구디 아카데미]

DaramGee·2024년 2월 6일

React hook useEffect useState 로컬스토리지 상태

클라우드 활용 자바개발자 양성과정(구디)

목록 보기

92/95

강의 내용

React

함수컴포넌트?
생성 -> 랜더링(새로고침) -> 함수, 변수에 대한 초기화발동(주소번지가 달라진다)
useEffectHook
없을 때->매번, 빈 값->1회, [특정배열]->그 배열 바뀔 때
의존성배열, 요청에 대한 결과가 매번 달라지도록 코딩 전개 가능해짐
useEffect 뒤 빈 값을 둔다? 위험하다. 원치않는 사이드이팩트가 일어날 수 있다. 뭔가 체크하는 것이 필요하다.
로컬스토리지 저장? setItem필요
예 : [keyword, typing]
참고 : https://ko.legacy.reactjs.org/docs/hooks-effect.html
사이드 이팩트 => 부작용
부작용? 의도하지 않은 효과를 내는 것, 부수효과
React 자체에서는 제공하지 않는 모든 것, 브라우저 API(DOM,내장객체)가 제공하는 기능
사이드이펙트는 순수함수(동일한 인풋, 동일한 아웃풋)와 대비되는 용어
참고 : https://curryyou.tistory.com/525

언제 true, false를 주며 초기화하는지 '위치' 중요!!
공식문서를 많이 들여다보는 것이 그렇기 때문에 중요하다

IO가 필요할 땐
로컬스토리지에서 읽어올 때, 지연이 발생할 수 있다.
이것을 lazy initialize(게으른 초기화)로 처리하는 방법이 있다.
어떻게? useState안에서 함수를 사용하여 반환값을 받는 식으로 사용할 수 있다.

const [keyword, setKeyword] = React.useState(()=>{
	console.log('초기화');
	return window.localStorage.getItem("keyword");
});

useEffect 언제 사용하면 좋을까?
keyword 바뀔 때 저장하는 방법으로 처리 가능!!
의존성 배열에 [keyword] 넣어보자, 검색버튼을 눌러도 해당 effect는 사라지지 않는 사이드이팩트(부수효과)가 없음!!
기억하고, 유지해야하는 게 있을 때 useEffect를 사용할 수 있다!!

useEffect 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>side</title>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const rootElement = document.querySelector("#root");
        const Example = () => {
            console.log('Example');
            //로컬스토리지에서 item을 가져오는 것은 꽤 용량이 큼. 
            //용량이 큰 활동의 경우, IO에서 지연이 발생할 수 있음. 비동기적 처리 필요
            const [keyword, setKeyword] = React.useState(()=>{
                console.log('초기화');
                return window.localStorage.getItem("keyword");
            }); 
            const [typing, setTyping] = React.useState(false); 
            const [result, setResult] = React.useState(""); 
            const handleChange = (event) => {
                console.log(event.target.value);
                window.localStorage.setItem("keyword", event.target.value);
                setKeyword(event.target.value);
                setTyping(true);//입력되기 시작하면 True로 변경하기
            }
            //선언부에 쓰면 변동이 있을 때마다 호출되는 문제 발생함. 그러니까 useEffect를 사용하자
            // window.localStorage.setItem("keyword", keyword);
            //최초 한 번만 실행되도록 할 수 있음. or [keyword]를 넣어서 확인 가능 
            React.useEffect(()=>{
                console.log('useEffect');
                window.localStorage.setItem("keyword", keyword);
            },[keyword]) // 빈값, [], [keyword], [keyword,typing] 사이드 이펙트 발동 가능 
            const handleSearch = (event) => {
                setTyping(false);
                setResult(`We find result of ${keyword}`);  //상태를 바꿀 수 있음. 
                
            }
        return(
            <div>
                <input type="text" onChange={handleChange} value={keyword}/>
                <button onClick={handleSearch}>검색</button>    
                <p>{typing ? `Looking for ${keyword}` : result}</p>
            </div>
        )
        }
        ReactDOM.createRoot(rootElement).render(<Example />);
    </script>
    </div>
</body>
</html>

우리 그룹웨어 팀플젝에선 어디에서 사용할 수 있을까?
1.대시보드 : 설정, 레이아웃 저장(해당 설정을 저장하여 페이지 로드되어도 유지
2.일정 및 캘린더 관리 : 특정 이벤트 추가하거나 수정했을 때 실시간 저장 및 반영, 상태 유지
3.사용자작업 히스토리 저장 : 그룹웨어에서 수행한 작업 히스토리를 스토리지에 저장하여 추후 작업이력 확인 가능

스토리지가..근데 뭐지?
로컬스토리지는 클라이언트 측에서 사용자 브라우저에 데이터를 저장하는 기술
비슷한 개념
- 캐시 : 브라우저가 관리하는 저장공간, 브라우저 종료시 일반적으로 지워짐
- 쿠키 : 브라우저에 저장되는 작은 텍스트 파일, 주로 세션관리 추적 등에 사용, 용량 제한
- 로컬 스토리지 : 더 큰 용량, 사용자 컴퓨터에 영구적으로 데이터 저장, 브라우저 세션 간 데이터 공유하는 방법