useState 사용할 때 함수설정

 

 

➡️useState 사용할 때 함수설정

 

리액트의 useState는 상태를 초기화할 때 여러 가지 방식으로 값을 설정할 수 있다.

이 초기화 방법에는 즉시 실행, 함수 호출, 그리고 함수 자체를 전달하는 방식 등이 있다.

각 방식은 미묘한 차이가 있으며, 상황에 따라 적절한 방법을 선택해야 한다.

 

설명을 위해 예를 들어 `exampleFn` 이라는 함수가 있다고 가정한다.

 

1. useState( exampleFn )

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

 

이 경우 exampleFn 함수 자체를 useState에 전달한다.

이는 exampleFn 함수를 매번 리렌더링할 때마다 호출하는 것이 아니라, 초기 렌더링 때만 호출하도록 보장한다.

리액트는 내부적으로 함수가 전달된 경우 이를 초기 상태로 설정하기 위해 한번만 실행한다.

 

 

2. useState( exampleFn() )

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

 

이 경우 exampleFn 함수가 즉시 호출되어 그 반환값이 초기 상태로 설정된다.

즉, 컴포넌트가 렌더링될 때마다 exampleFn 함수가 실행되고 그 결과를 초기 상태로 설정된다.

이는 불필요한 함수 호출을 초래할 수 있다.

 

3. useState( () => exampleFn() )

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

 

이 경우는 첫 번째와 유사하지만, 함수 호출을 래핑하여 전달한다.

이는 첫 번째 방법과 동일하게 초기 렌더링하지만 exampleFn  함수를 호출한다.

이 방법은 특히 초기 상태를 설정하기 위해 무거운 계산이 필요할 때 유용하다.

 

---

 

➡️요약 및 권장 사용 방법

1. useState( exampleFn  ): 초기 상태를 설정하기 위해 함수 자체를 전달하는 방식. 초기 렌더링 시 한 번만 함수가 호출되므로, 불필요한 함수 호출을 방지할 수 있다. 초기 상태를 설정하는 데 적합하다.

2. useState( exampleFn () ): 즉시 함수를 호출하여 반환값을 초기 상태로 설정한다. 컴포넌트가 렌더링 될 때마다 함수가 호출되므로, 불필요한 연산이 발생할 수 있다. 간단한 값이나 함수 호출이 가벼운 경우에 사용할 수 있지만, 일반적으로는 피하는 것이 좋다.

useState( () => exampleFn () ): 초기 상태를 설정하기 위해 함수를 한 번만 호출하는 최적화된 방식. 함수  호출을 지연시키고 초기 렌더링 시에만 실행되도록 한다. 복잡한 초기 상태 설정이 필요할 때 유용하다.

 

➡️결론 및 생각

대부분의 경우 useState( () => exampleFn () ) 또는 useState( exampleFn )를 사용하는 것이 좋다.

두 가지 방식 모두 초기 렌더링 시 한 번만 함수가 호출되며, 불필요한 재연산을 피할 수 있다.

간단한 값을 초기 상태로 설정할 때는 useState(initialValue)를,

초기 상태가 계산에 의해 결정될 때는 useState(() => initialValue)를 사용하는 것이 좋다.