기술면접을 보게 되었다.
나름 신입 프론트엔드 개발자가 받는 기술질문을 공부하고, 책도 읽었고 했는데
실전은 다르구나...
더 딥하게 공부해야겠다! 라는 생각이 들지는 않았고, 원리를 좀더 이해해야겠다는 생각이 들었다.
단순히 설명하는것에 그치지 않고 어떤 상황이 주어졌을때 어떻게 문제를 풀지 짱구를 돌려야하기 때문...
그리고 개발용어에 좀더 익숙해질 수 있도록 해야겠다.
뭔가 머리가 띵 했던 질문이 있었는데
useEffect 얘기를 하다가 '의존성 배열에 객체가 들어가면 어떻게 되나요?' 라는 질문이었다.
그러게요??(긁적긁적) 그런 의문이 들수도 있을텐데 왜 생각을 못해봤을까... 심지어 객체를 넣어본적도 있는 것 같다...
어찌저찌 대답을 하긴 했지만 맞는 말을 했는지도 잘 모르겠어서 이참에 리액트 코드도 좀 뜯어보고 다시 백투베이직을 해보려고 한당..
useState
리액트에서 왜 그냥 변수 쓰지 않고 useState를 사용하나요?
이때 어떻게 구체적으로 대답했는지는 기억이(...) 안나지만,
useState는 변하는 수를 컴포넌트 내에서 사용하기 위해서 쓰는 hook이다.
변수와 그 변수를 조작하는 함수를 같이 등록해서, 변수에 변화를 줄 때 미리 등록해둔 그 함수를 통해서만 조작해서 사용한다. 개발자가 결과를 예측할 수 있도록 하기 위함이다.
뭐 이런식으로 대답했던 것 같다.
그리고 최대한 이런 원론적인 얘기 외에도 내가 어떻게 이걸 써봤는지 풀려고 했다.
각설하고,
그래서 useState가 뭐고 왜 쓰는지 리액트에서는 어떻게 설명할까?
useState(init)
컴포넌트 상단에 호출해
상태 변수(state variable)를 선언하는 것
형태
구조분해할당을 활용한 배열을 반환한다.
const [상태, set함수] = useState(초기값);set함수로 상태를 업데이트하고 렌더링을 트리거한다.
set함수는 반환값이 없다(void)
주의사항
최상위 수준에서만 호출할 수 있다. 루프나 조건문 내에서 호출할 수 없음.
strict모드에서는 초기화 함수를 두번 호출한다.(개발도중에만)
React batches state updates. It updates the screen after all the event handlers have run and have called their set functions. This prevents multiple re-renders during a single event.
리액트는 상태 업데이트를 일괄처리(batches)한다. 모든 이벤트핸들러가 먼저 실행이 된 후에야 기능을 호출한 후 화면을 업데이트한다.
본론으로 돌아가서,
왜 변수가 아니라 useState를 쓰느냐?
상태가 업데이트되었을때 리렌더링해 UI도 함께 업데이트해야하기 때문이다.
단순 변수가 업데이트된다고 리액트가 그것을 감지해 UI를 업데이트하지는 않는다.
변수는 렌더링될때마다 재설정된다. 상태는 업데이트된다.
useState는 어떻게 구현되어있을까?
구현을 어떻게 했는지는 찾기 힘든 것 같다.
대신 타입을 좀 보면 감이 잡힐 수도 있을 것 같아서 참고해보려고 한다.
function useState<S>(initState:S | (() => S)): [S, Dispatch<SetStateAction<S>>]
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];useEffect
useEffect?
- 의존성배열에 객체 넣으면 어떻게 될까?
- 참조형, 원시형에 대한 질문.
/**
* Accepts a function that contains imperative, possibly effectful code.
*
* @param effect Imperative function that can return a cleanup function
* @param deps If present, effect will only activate if the `values in the list` change. : deps(의존성배열)가 존재하는 경우, 목록의 값이 변경될 때만 effect 발생
*
* @version 16.8.0
* @see https://reactjs.org/docs/hooks-reference.html#useeffect
*/
function useEffect(effect: EffectCallback, deps?: DependencyList): void;일단 의존성배열에는 '배열'을 넣었을 때 변화가 생길 때 effect가 발생한다고 한다.
나는 객체를 넣어도 값이 바뀐다면 effect가 발생하지 않을까? 하고 이야기 했었다.
그러자 참조형, 원시형에 대해 질문이 들어왔다.
useEffect의 두번째 매개변수로 들어오는 값에는 원시값이나 배열같은 정적인 값만 사용해야한다.
참조타입이 의존성배열에 들어가게 된다면 항상 값이 변경된 것으로 간주되어 useEffect 훅이 매번 호출되게 된다.
객체에 의존하는 useEffect가 필요한 경우, 객체의 특정 속성을 의존성 배열에 포함시키는 방법을 사용하는 방법이 있다. 그렇게 하면 해당 속성이 변경되는 때에만 useEffect훅이 호출될 것이다.
