[React] useState 초기화 값에 함수 선언/호출이 들어가면 어떻게 될까?

 

useState는 리액트를 배우고나서 생각없이 사용하던 함수중 하나이다.

실행하면 값과 그 값을 변환시켜줄 수 있는 함수를 객체로 리턴시켜준다.

초기값을 설정할 수 있다 정도였다.

그런데 리액트 수업을 듣던 중에 값을 리턴하는 함수의 호출을 초기값을 지정하는 부분에 설정했을 때,

헷갈리기 시작했다.

데이터는 정상적으로 초기값을 지정해주는데, 해당함수의 호출을 넣었기 때문에

함수컴포넌트의 특성상 상태가 바뀌면 컴포넌트 전체가 리랜더링되면서 해당 함수호출도 다시 실행되고,

그럼 값을 또 리턴한다.

그런데.. 초기값은 그대로다.. 그래서 블로그에 올리기로 생각했다.

 

 

 

useState

React에서 useState를 사용할 때 함수를 초기 상태로 설정하는 경우,

해당 함수는 컴포넌트가 처음 렌더링될 때 단 한 번만 호출됩니다.

이는 useState가 설계된 방식으로, 초기 상태를 설정하는 부분이기 때문입니다.

따라서, 함수 컴포넌트가 리렌더링될 때마다 useState에 전달된 함수가 재호출되는 것은 아닙니다.

 

컴포넌트가 업데이트되어도 useState에서 제공한 초기화 함수는 다시 호출되지 않습니다.

React는 초기 렌더링 시 설정된 상태 값을 유지하고, 그 상태는 setState 함수를 통해서만 변경할 수 있습니다.

 

그래서 useEffect안에서는 선언하지 못하게 만든게 아닌가 싶다.

어차피 초기에 한번만 실행하니까. (이건 내 추측)

 

 

useState의 용법

값을 넣을 때 : 자동으로 초기값으로 설정된다.

const [state, setState] = useState(initialState);

 

 

 

 

값을 리턴하는 함수의 호출 넣을 때 : 리턴하는 값으로 초기값 설정된다.

const [answer, setAnswer] = useState(getNumbers());

// lazy init : 함수가 호출되서 리턴값을 돌려줄때까지 리액트가 기다려준다

 

• useState에 초기값을 리턴하는 함수의 호출을 넣어도 상관은 없다.
• useState에서 첫랜더링때만 자동으로 초기값을 설정하기 때문. 그 이후로 어떤 값이 들어와도 노상관! 
• 다만 쓸데없이 계속 함수를 호출시키는게 문제다
• 로직이 복잡하거나 시간이 오래걸리는 함수의 경우 문제가 될 수 있다. (성능 최적화 이슈, 사이드이팩트)

 

 

 

값을 리턴하는 함수의 선언 넣을 때 : 리턴하는 값으로 초기값 설정된다.

const [answer, setAnswer] = useState(getNumbers);

or

const [answer, setAnswer] = useState(() => getNumbers());

// lazy init : 함수가 호출되서 리턴값을 돌려줄때까지 리액트가 기다려준다

 

• 위와 같은 이슈를 해결하기 위해서 함수의 선언을 넣어주거나, 함수를 호출하는 콜백함수를 넣어주면 된다.
• 해당함수도 첫 랜더링때만 한번 실행되고, 그 결괏값이 초기 값으로 설정된다.
• 불필요한 함수 호출을 방지하여 성능 향상에 도움을 줄 수 있다.

 

 

Lazy Init

useState에 함수(호출, 선언)을 넣었을때 함수가 호출되서 리턴값을 돌려줄때까지 리액트가 기다려준다는 용어

 

 

 

 

 

 

참조!

https://www.inflearn.com/course/lecture?courseSlug=web-game-react&unitId=21584&tab=curriculum&category=questionDetail&q=1187032

학습 페이지