8화: Keeping Components Pure

이 글은 단순히 리액트 공식 문서를 읽고 베꼈을 뿐이다!! 학습 목적이라면 공식 문서를 보는 걸 추천한다.

 

Unsplash 의 Jacques LE HENAFF 님 사진

공식 문서

https://react.dev/learn/keeping-components-pure

Keeping Components Pure – React

순수함수란?

• 똑같은 arguments가 주어졌을 때 함수의 반환값은 항상 같다.
• side effect가 없다.

즉 local static variable, non-local variable, mutable reference argument, input/output stream 을 변환하여 결과를 반환하지 않고, 얘네들의 값을 변형시켜서도 안 된다는 말이다.

순수성

• 대표적인 순수함수: 수학 식
• 리액트는 우리가 작성한 모든 컴포넌트가 순수함수라고 가정함
• 컴포넌트는 일종의 레시피: 조리 과정에 새로운 걸 추가하지 않고 순서를 잘 따라가면 항상 같은 요리(컴포넌트에서는 JSX)가 나옴
• 컴포넌트는 자기 자신의 JSX만을 반환해야 함
• 컴포넌트는 본인의 렌더링 이전에 존재했던 값들을 바꿔서는 안 됨 -> 컴포넌트 렌더링 시 props, state, context가 read-only이고 이 값들을 바꾸기 위해서는 비동기 setter를 써야만 하는 이유!

Side effects

• 순수성을 지키지 않았을 경우 매 렌더링마다 다른 JSX를 반환하게 되는 문제 발생 가능
• 각 컴포넌트들이 특정한 순서를 지켜서 렌더링된다고 생각하지 말기! 각 컴포넌트는 본인 것만 렌더링하고 다른 애들은 전혀 신경쓰지 않음

StrictMode를 사용해서 순수하지 않은 함수 찾기

• 개발 환경에서 각 컴포넌트 함수를 두 번씩 호출함 -> 순수하지 않은 함수 검출을 도와줌

Local mutation을 이용해서 순수성 지키기

• 본인의 렌더링 이전에 존재했던 값들을 바꾸는 게 문제라고? 그럼 렌더링할 때 내가 직접 만들어서 쓰면 되잖아?
• 렌더링 당시에만 쓰고 함수 실행이 끝나면 바로 버릴 값들을 만들어서 쓰는 건 상관 없음

Side effect를 일으켜도 되는 것

• 결곡 어느 순간에는 뭔가가 바뀌어야 함: 화면 전환이든, 애니메이션 시작이든, 자료 변형이든
• event handler에 side effect를 넣으면 됨: 얘네는 렌더링 도중에 실행되는 애들이 아니니까
• 최후의 수단으로 useEffect 를 써도 됨: 얘네도 렌더링 도중에 실행되지는 않음
• 가능한 한 렌더링 단계에서만 로직을 표현하도록 해 보자

순수성을 지키면 장점이 있어?

• 컴포넌트를 (서버처럼) 아예 다른 환경에서도 쓸 수 있음
• 순수함수는 입력이 같으면 같은 출력을 보장하므로 캐싱을 통해서 렌더링을 건너뛰어 프로그램 성능 개선 가능
• 렌더링 도중에 무슨 값이 바뀌어서 다시 렌더링을 해야 할 때 순수함수니까 지금 하던 렌더링을 즉시 버려버리고 새로 시작해도 문제 없음 (렌더링 단계에서 외부의 값을 건드리는 과정이 아예 없으므로)

state, props 이런 친구들은 변하는 값인데 이래도 순수해?

(나중 단계의 공식 문서에 관련된 내용이 있다.)
state나 props들은 실제로는 유동적인 값일지라도 컴포넌트 렌더링 당시에 사용하는 값들은 일종의 snapshot이다.
컴포넌트가 '나 렌더링 시작해!' 라고 말한 순간의 state와 props를 찰칵 찍어서 고정된 read-only 값으로 넘겨주고, 이 값들은 해당 렌더링 도중에는 절대 바뀌지 않는다. 컴포넌트 함수의 실행에 있어서 이러한 값들은 일종의 고정된 값의 arguments로 취급되는 셈이고, 따라서 순수성을 지킬 수 있다.

여담) Side effect의 번역에 관해

Side effect를 어떻게 번역할 지 고민이 많았다 ㅋㅋ
구글링을 해 보면 '부작용' 이라 하는 경우가 많아서 초고에는 부작용이라고 썼었다. 근데 공식 문서에 이런 표현이 나온다.

These changes—updating the screen, starting an animation, changing the data—are called side effects. They’re things that happen “on the side”, not during rendering.

 

여기서 말하는 side effect에 그렇게까지 부정적인 의미가 담겨 있다는 생각이 들지 않았다.
하지만 '부작용'에는 부정적인 뜻이 담겨 있다. 표준국어대사전에서는 부작용을 이렇게 정의한다.

「1」 어떤 일에 부수적으로 일어나는 바람직하지 못한 일.
「2」 『약학』 약이 지닌 그 본래의 작용 이외에 부수적으로 일어나는 작용. 대개 좋지 않은 경우를 이른다.

 

대놓고 '나 부정적인 말이야' 라고 광고한다.

신기하게도 부작용의 '부' 라는 글자는 나쁜 의미가 없다. 네이버 한자사전에서 '副'를 검색하면 이런 의미라고 나온다.

버금(으뜸의 바로 아래), 다음, 둘째, 곁따르다, ...

 

이 한자의 뜻으로 본다면 부작용은 리액트 공식 문서에서 말하는 side effect와 같은 의미이긴 하다. 렌더링이라는 가장 중요한 본 작용에 따라오는 부수적인 작용이라는 뜻이 되니까.

그렇다면 side effect를 '부작용'으로 번역하는 게 옳을까? 솔직히 잘 모르겠다. 이제 와서 내 마음 속 '부작용'이라는 단어의 개념(시니피에)을 바꾸기에는 쉽지 않아 보인다. 그래서 고민 끝에 그냥 side effect라는 원문으로 적기로 했다.

 

(비공식 번역에서도 '사이드 이펙트'라고 표현했다.)