React: State와 Effect의 차이

오늘은 프로그래밍을 하면서 react의 state와 effect의 차이에 대해 한자 적어보려합니다.

react에 익숙하지 않아서 조금씩 배우면서 지식을 늘여가는 중이라 제가 찾아본것들이 도움이 되었으면 합니다.

가볍게 읽어주세요.

 

React에서 state와 effect는 각각 다른 역할을 하는 훅(hooks)으로, 컴포넌트의 상태 관리와 사이드 이펙트(side effects) 처리를 담당합니다. 둘의 차이를 명확히 이해하는 것은 반드시 필요하답니다.

1. state: 상태 관리 (useState)

state는 컴포넌트의 상태를 관리하는 데 사용됩니다. 상태는 컴포넌트의 UI나 동작에 영향을 미치는 데이터로, 보통 사용자 입력, 서버로부터의 응답, 또는 시간이 지남에 따라 변하는 데이터를 저장합니다.

특징:

• 상태 변경: useState 훅을 사용하여 상태를 설정하고, 이 상태가 변경되면 컴포넌트는 다시 렌더링됩니다.
• 렌더링 트리거: 상태가 변하면 해당 컴포넌트와 하위 컴포넌트들이 다시 렌더링됩니다.
• 초기값 설정: 상태는 초기값을 설정할 수 있으며, 이 값은 컴포넌트가 처음 렌더링될 때만 적용됩니다.

예제 코드 1

위 코드에서 count는 상태이며, setCount를 호출하여 상태가 변경될 때마다 컴포넌트가 다시 렌더링됩니다.

2. effect: 이펙트 처리 (useEffect)

effect는 컴포넌트가 렌더링된 이후에 발생하는 사이드 이펙트를 처리하는 데 사용됩니다. 사이드 이펙트는 React의 순수한 렌더링 과정 외부에서 발생하는 작업입니다. 예를 들어, 데이터를 서버에서 불러오거나, DOM을 직접 조작하거나, 타이머를 설정하는 등의 작업이 해당됩니다.

특징:

• 렌더링 후 실행: useEffect는 기본적으로 컴포넌트가 렌더링된 후에 실행됩니다.
• 의존성 배열: useEffect는 두 번째 인자로 의존성 배열을 받습니다. 이 배열 안에 있는 값이 변경될 때마다 effect가 다시 실행됩니다. 배열이 비어있으면 컴포넌트가 마운트되고 언마운트될 때만 실행됩니다.
• 정리(clean-up): 컴포넌트가 언마운트될 때나, 의존성이 변경될 때 정리 작업을 할 수 있습니다.

예제 코드 2

위 코드에서 useEffect는 타이머를 설정하고, 컴포넌트가 언마운트될 때 타이머를 정리하는 역할을 합니다.

결론은 다음과 같습니다. ^^

• state는 컴포넌트의 상태를 관리하고, 상태가 변경되면 컴포넌트가 다시 렌더링됩니다.
• effect는 렌더링 이외의 작업(사이드 이펙트)을 처리하며, 데이터 페칭, 구독 설정, DOM 조작 등의 작업을 할 수 있습니다.

 

어때요. 조금 도움이 되셨는지요..

조금이라도 도움이 되었기를 바라며 넉넉한 오후 시간 되세요. ~