React useState 와 useEffect

useState
가장 기본적인 Hook으로서 함수형 컴포넌트 에서도 가변적인 상태를 지닐 수 있게 해준다.

const [Value, setValue] = useState(0)

useState

useState() 함수의 파라미터에 들어가는 값은 초기값 을 의미하는 것

사용하고자 하는 state 의 기본값을 0([]) 배열로도 가능 으로 설정

첫 번째 원소, Value 는 상태 값

두 번째 원소, setValue 는 상태를 설정하는 함수

-> setValue 함수에 파라미터를 넣어서 호출 -> 전달받은 파라미터로 Value 의 값이 바뀜

useEffect

기록할겸 useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행할 수 있는 Hook (React Hook함수형 컴포넌트에서 사용)

기존의 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate를 합친 형태라도 봐도 무방 (클래스형 컴포넌트가 더 어려운거 같다. )

useEffect() 의 파라미터는 callback

렌더링이 최초 실행되었을 때도 호출됨

• 최초 렌더링 되었을 떄 : Mount 되었을 때
• componentDidMount 의 역활이 원래 그렇다.

만약 useEffect 에서 설정한 함수가, 컴포넌트가 화면에 최초 렌더링 되었을 때 (즉, Mount 되었을 때) 만 실행되고, 이후에 업데이트 될 경우에는 실행 할 필요가 없도록 설정하고 싶으면 함수의 두번째 인자로 비어있는 배열 (즉, []) 을 넣어줌

• Mount, update 되었을 때 모두 실행

const completeOnChange = () => {
    console.log('렌더링이 완료되었습니다.');
    console.log({
        name,
        nickname
      });
};

useEffect(completeOnChange);

• Mount 되었을 때만 실행

const completeOnChange = () => {
    console.log('마운트 될 때만 실행됩니다.');
    console.log({
        name,
        nickname
    });
};

useEffect(completeOnChange, []);

• 특정 값이 Update 될 때만 실행하고 싶을 때

만약 useEffect 에서 설정한 함수가, 특정 값이 변경이 될 때 (즉, Update 되었을 때) 만 실행되고, 다른 값들이 변경되는 경우에는 실행 할 필요가 없도록 설정하고 싶으면 함수의 두번째 인자로 전달되는 배열 안에, 확인하고 싶은 값을 넣어줌

const completeOnChange = () => {
    console.log('name 값이 업데이트 될 때만 실행됩니다.');
    console.log({
        name,
    });
};

useEffect(completeOnChange, [ name ]);