[기술 면접 스터디-8일차] 순수함수 / state와 props에 대해

1. 순수 함수란 무엇인가요? 불변성과 사이드 이펙트와 연결하여 설명해주세요.

💡 순수함수는 항상 동일한 input에 동일한 output이 나와야 하고, 또 외부의 상태를 변경하거나, 외부 값을 참조하지 않고 내부에서만 값을 변경하여 프로그램의 상태를 직접 변경하지 않도록 합니다. 리액트는 컴포넌트를 엄격하게 순수함수로 작성하도록 설계 하였습니다. 이렇게 함으로서 

1. 코드가 복잡해 지더라도 독립성을 유지할 수 있고,
2. 순수함수로서 결과를 예측 가능하여 예상지 못한 사이드 이펙트나 버그를 방지할 수 있고,
3. 코드의 의도를 명확히 파악 가능하므로 유지 보수성이 높아지고, Test하기 쉽습니다.
4. 또 컴포넌트가 순수함수로 작성되면, props가 변경되지 않은 경우 렌더링을 건너뛸 수 있으므로 성능을 최적화할 수 있습니다. → ( React는 함수 컴포넌트의 렌더링 결과를 이전에 렌더링된 결과와 비교하여, props나 state가 변경되지 않은 경우 이전 결과를 재사용합니다. 순수 함수 컴포넌트는 동일한 입력(props)이 주어진 경우 항상 동일한 결과를 반환하므로, React는 이를 인식하고 불필요한 렌더링을 건너뛰어 성능을 최적화)

순수함수인 React 컴포넌트에서는 내부 상태값의 불변성을 유지하여 상태 관리를 좀 더 효율적으로 처리하도록 권장하고 있습니다. 컴포넌트의 상태값은 불변객체로 관리해야만 사이드 이펙트를 발생시키지 않고 항상 같은 값을 반환할 수 있고, 테스트 하기도 훨씬 수월하기 때문입니다. React에서 순수 함수와 불변성을 적극 활용하면, 상태 관리가 더 쉬워지고 예상치 못한 버그를 줄이며, 애플리케이션의 성능을 향상시키는데 도움이 됩니다.

• 불변성을 가진 원시타입과 달리 참조타입의 경우에는 의도적으로 새로운 객체를 생성하여 불변성을 지켜주어야 합니다. 이 때 새로운 주소 값을 가진 객체를 복사하여 상태를 업데이트 해줍니다. spread operator, map, filter, slice, reduce 메소드들을 사용할 수 있습니다.

순수함수(Pure Function)는 동일한 입력에 대해 항상 동일한 출력을 반환하고, 외부의 상태를 변경하지 않고 오직 입력값에 의해서만 결과를 반환하는 함수를 말합니다. 즉, 함수가 입력값에만 의존하고 외부에 영향을 주지 않는 함수를 순수 함수라고 합니다.

순수함수를 사용하는 이유 -> 유닛테스트 / 순수함수는 a + b를 항상 같은값을 반환, 유닛테스트 등에서 예측 가능한 코드를 사용할 떄 순수 함수로 작성하면 좋다. 상황에 맞는 함수를 쓰기 때문에 순수함수로 동일 결과값을 얻기 때문에 코드 이해가 쉬워진다. 재사용에 용이하다.

 

+ 불변성이란? 

불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말합니다. 자바스크립트의 데이터 형태중에 원시 데이터는 불변성이 있고, 원시 데이터가 아닌 객체, 배열, 함수는 불변성 없습니다.

+ 왜 리액트에서는 상태의 불변성을 지켜주는 것이 중요할까?

리액트에서는 화면을 리렌더링 할지 말지 결정할 때 state의 변화를 확인합니다. state가 변했으면 리렌더링 하는 것이고, state가 변하지 않았으면 리렌더링을 하지 않습니다. 그때, state가 변했는지 변하지 않았는지를 state의 변화 전, 후의 메모리 주소를 비교합니다. 그래서 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지키지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없기 때문에 리액트는 state가 변했다고 인지하지 못하여 리렌더링이 일어나지 않게되기 때문입니다.

 

2. React의 state와 props에 대해서 설명해주세요.

💡props와 state는 리액트에서 사용되는 데이터의 개념입니다.
State는 컴포넌트 내부에서 사용되고 상태에 따라 변하는 동적 데이터 입니다. useState훅을 사용하여 state를 만들고, setState를 사용하여 값을 변경합니다. State가 변경되면 컴포넌트는 리렌더링 됩니다.

Props(Properties)는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 특수 객체 형태의 데이터를 말합니다. 읽기 전용 객체로 직접적으로 수정 할 수 없는 값이고, 단방향으로 데이터를 전송한다는 특징이 있습니다.

+ 컴포넌트의 리렌더링의 원리, state가 변경되면 어떤일이 일어나는지

가상돔 실제돔 반영 결과 / 값이 변하면 가상돔이 인지하고 실제돔에게 씌워주는 것이 리렌더링

리액트는 단방향인데, 뷰는 양방향임, 단방향인지 양방향인지 언급이 제일 큰 차이

 

+ 왜 변수가 아닌 state에 데이터를 저장하나?

리액트에서 일반 변수는 값이 바뀌었을 때 리렌더링이 되지 않기 때문에 화면이 업데이트 되지 않지만, state에 저장된 데이터는 리렌더링이 되어 화면이 리렌더링 되기 때문입니다. 또 리액트에서는 분리된 컴포넌트별로 리렌더링을 하게하여 성능을 향상시킬 수 있으므로, state를 주로 사용한다고 생각합니다.

+ useState 사용시 주의사항

1. 배열이나 객체의 값을 변경할 때는 직접 변경하지 않고, 복사하여 값을 변경한 뒤에 setter 함수를 이용하여 업데이트 해주어야 합니다. -> useState 특성

2. useState의 상태 업데이트는 비동기적으로 처리됩니다. 따라서 동일한 렌더링 주기 내에서 여러 번의 상태 업데이트가 발생하는 경우 컴포넌트 상태가 즉시 반영되지 않을 수 있습니다.

 이런 경우에는 이전 상태 값을 기반으로 상태를 업데이트하도록 setState의 함수형 업데이트 형태를 사용할 수 있습니다. 함수형 업데이트를 사용하면 이전 상태를 정확하게 참조할 수 있기 때문에 여러 번의 상태 업데이트를 배치 업데이트와 무관하게 동기적으로 처리할 수 있고 동시에 배치 업데이트를 활용하여 성능을 최적화할 수 있습니다.

+ useState의 Batching이란? / 배치 업데이트와 함수형 업데이트

리액트에서는 일반적으로 성능 최적화를 위해 배치업데이트 방식을 사용합니다. React가 상태 업데이트를 비동기적으로 처리하여 여러 상태 업데이트를 한 번에 처리함으로써 렌더링 횟수를 최소화하고 성능을 최적화합니다.

즉, useState 훅을 사용하거나 setState 메서드를 호출하여 상태를 변경하더라도 해당 변경이 즉시 반영되지 않고, React는 업데이트를 큐에 저장합니다. 그리고 다음 렌더링 주기가 시작될 때 이러한 큐를 처리하여 상태를 업데이트합니다.

배칭은 React Event 단위로 발생합니다. 동일한 이벤트 핸들러 내에서 여러 번의 상태 업데이트가 발생하는 경우, 하나의 리액트 이벤트 핸들러에 두 가지 상태변화를 넣어 배칭을 가능하게 함으로써 렌더링을 최적화할 수 있습니다. 

function useInput() {
    const [value, setValue] = useState("");
    const [validation, setValidation] = useState(false);

    const onChange = (e) => {
      setValue(e.target.value);
    }

    // value 업데이트 되면, validation 업데이트
    useEffect(() => {
      setValidation(validate(value));
    }, [value]);

    const validate = (value) => {
        ...
    }

    return { value, validation, onChange }
}

배칭을 통해 1회만 렌더링

function useInput() {
    const [value, setValue] = useState("");
    const [validation, setValidation] = useState(false);

    const onChange = (e) => {
      setValue(e.target.value);
      setValidation(validate(e.target.value)); // onChange 안으로 넣어주었다.
    }

    const validate = (value) => {
        ...
    }

    return { value, validation, onChange }
}

+ 함수형 업데이트 

함수형 업데이트는 이전 상태를 받아와서 새로운 상태를 반환하는 방식으로 상태를 업데이트합니다. 이렇게 함으로써 이전 상태 값을 정확하게 참조할 수 있고, 동시에 배치 업데이트를 활용하여 성능을 최적화할 수 있습니다.

[React] Batching을 활용한 렌더링 최적화