useState
를 사용하면 함수형 컴포넌트에서도 상태를 관리할 수 있습니다.
useState
는 useState()
함수를 사용하여 상태를 생성합니다. 이 함수는 배열을 반환하며, 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다. 이 함수는 인자로 새로운 상태 값을 받습니다.
const [count, setCount] = useState(0);
위의 코드는 count
라는 상태 값을 생성하고, setCount
함수를 반환합니다. count
의 초기값은 0입니다.
useState
는 배열을 반환하며, 첫 번째 요소는 상태 값이고, 두 번째 요소는 상태를 업데이트하는 함수입니다.set
함수는 콜백을 인자로 받는데, 콜백은 이전 상태 값을 인자로 받습니다. 이전 상태 값을 참조하여 새로운 상태 값을 계산할 수 있습니다.useState
는 이전 상태 값을 보존하기 때문에, 복잡한 상태를 관리하기가 쉽습니다.useEffect
는 함수형 컴포넌트에서 Side Effect를 수행하기 위해 사용됩니다. 컴포넌트가 렌더링된 후에 특정 작업을 수행하도록 설정할 수 있습니다
useEffect(() => {
// 실행할 작업
}, [의존성 배열]);
useEffect
함수의 첫 번째 인자로는 실행할 작업을 입력합니다. 두 번째 인자로는 의존성 배열을 입력합니다. 의존성 배열에는 useEffect
가 실행될 조건을 명시합니다. 의존성 배열이 변경되면, useEffect
함수의 첫 번째 인자로 입력된 작업이 실행됩니다.
Side Effect
란 컴포넌트 외부에 영향을 주는 작업을 의미합니다. 이러한 작업은 컴포넌트의 상태 변화와는 별개로 발생하는 것으로 API 호출
, DOM 조작
, 타이머 설정
등이 일련의 예에 속합니다. 이러한 작업은 컴포넌트의 렌더링 결과물에 직접적인 영향을 주지 않지만, 컴포넌트 외부에 영향을 미치기 때문에 Side Effect
로 분류됩니다.
의존성 배열을 사용하여, useEffect
가 실행될 조건을 명시할 수 있습니다.
의존성 배열이 비어있는 경우 []
, 컴포넌트가 최초로 렌더링될 때에만 useEffect
함수의 첫 번째 인자로 입력된 작업이 실행됩니다.
의존성 배열이 없이 useEffect
내부에서 상태값을 변경하는 경우 무한 루프에 빠질 수 있습니다.
useEffect
함수의 첫 번째 인자로 입력된 작업은 비동기 함수를 포함할 수 있습니다.
useState
와 useEffect
를 함께 사용하면, 컴포넌트에서 상태를 변경하고, 변경된 상태에 따라 Side Effect를 수행할 수 있습니다. 예를 들어, 버튼을 클릭하면 상태가 변경되고, 변경된 상태에 따라 API를 호출하는 경우가 있습니다.
const [count, setCount] = useState(0);
useEffect(() => {
// count 값이 변경될 때마다 실행됩니다.
fetch(`https://api.example.com/data?count=${count}`)
.then(response => response.json())
.then(data => {
// API 응답 데이터를 처리합니다.
});
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
</div>
);