React useState, useEffect

React 에는 다양한 Hook 들이 존재합니다. 

이번 글에서는 useState, useEffect 을 소개하려고 합니다.

 

useState : 상태값을 관리해주는 훅

아래는 코드는 useState() 에 초기값을 빈문자열로 선언해 주고 있다. 

useState는 Object, bool,  string, number 형이 들어갈 수 있다.

const [keyword, setKeyword] 가 있는데

keyword는 데이터 그 자체이고

setKeyword 는 keyword에 접근하여 수정할 수 있는 함수이다.

이렇게 array 안에 두개의  return 값을 갖는다.

const App = () => {
    const [ keyword, setKeyword] = React.useState("");
    const [ typing, setTyping] = React.useState("");
    const [ result, setResult] = React.useState("");
    
    function handleChange(event) {
        setKeyword(event.target.value);
        setTyping(true):
    }
    
    function handleClick() {
        setTyping((prev) => !prev);    
/*
        useState로 만들어진 setTyping함수는 인자로 이전값을 받아온다.
        그래서 그전의 값을 가져와서 반대로 인자로 넣어준것이다.
        그래서 위와 같이 사용했다.
*/        
        setResult(`We fidn results of ${keyworkd}`);
    }
    
    return(
        <>
            <input onChange={handleChange} />
            <button onClick={handleClick}>search</button>
            <p>{typing ? `Looking for ${keyword}...` : result } </p>
        </>
        );
    };
 
 

♣ TIP ♣

useState 에 직접적인 값 대신에 함수를 넘기는 것을 lazy  initialization 라고 한다.

react 공식 문서에서는 이러한 lazy initialization를 초기 값이 복잡한 연산을 포함할 때 사용하라고 되어 있다. 

lazy initialization 함수는 오직 state가 처음 만들어 질 때만 실행된다.

이 후에 다시 리렌더링이 되면 , 이 함수의 실행은 무시된다.

 

 

 

 

 

useEffect : 사이드이펙트를 처리하기 위해 사용된다.
쉽게 말하면 어떤 데이터가 변경되거나 마운트 될 때 데이터를 변경하는 것이다. 

 

사이드이펙트(Side-Effect) 란 ? 
함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말합니다.  

 

useEffect(() => {
    console.log("Effect")
})
// 위와 같이 실행하면 모든 변화에 다 반응한다.
 
useEffect(() => {
    console.log("Effect");
}, [])
    // 위와 같이 실행하면 컴포넌트가 그려질때만 실행된다.
 
const [result, setResult] = useState("");
useEffect(() => {
    console.log("Effect");
}, [result])
// 위와 같이 실행하면 result 가 변경될 때 마다 실행된다.

위에 설명을 읽어보면 된다. 

useEffect의 첫번째 인자는 함수가 들어가고 두번째 인자는 필수는 아니지만 

데이터가 들어가면 그 데이터가 변경될 때마다 실행된다. ( 굳이 1개만 안들어가도 된다. 여러개 가능) 

 

 

React는 Hook들도 다양하고 npm 에서 다양한 Hook들도 존재하고

Hook들이 반복 될 때는 커스텀 Hook 을 만들어서 사용하는것이 좋다.

그 후 npm에 저장해서 재사용도 할 수 있고 배포도 할수있다.

 

리액트는 최고인것 같다. ㅎㅎ