[React] 우린 왜 state, function, effect 순으로 작성했는가

비개발자가 급하게 react를 배워서 만든 프로젝트를 보면, 부트캠프, 국비, 전공자가 배운 보편적인 방식에 벗어난 경우가 생각보다 꽤 많습니다. 하나의 페이지 컴포넌트 안에 2천줄이 넘어가기도 하고, 하드 코딩된 로직도 많으며, 급하게 기능을 추가한 경우도 꽤 있기에 로직 순서가 꼬여있기도 합니다.

제가 마주한 상황은 CRA 환경이었으며 eslint가 설정되어있지 않은 상태였습니다. 그렇다보니 state문, 글로벌 변수 선언, 함수 선언, effect문이 일정하게 모여서 작성되지 않고 여기저기 파편화가 되어있는 상태였습니다. 기능구현 입장에서 봤을 땐 크게 문제가 안될 수도 있습니다. 어쨌든 선언문이 호출보다 앞에 작성되었으니까요.

const PageComponent = () => {
    const [a, setA] = useState();

    const handleClick = () => {
        /* ... */
    };
    
    const [b, setB] = useState();

    useEffect(() => {
        handleClick();
    }, []);

    const handleChange = () => {
        /* ... */
    };

    useEffect(() => {
        handleChange();
    }, []);

    return ();
}

이런 식으로 작성된 코드가 상당히 많았고, 

const MyComponent = () => {
    sayHello();
    
    function sayHello() {
        console.log("Hello!");
    }
    
    return ();
}

어쩌면 위와 같이 작성된 경우도 있었을 겁니다. 만약 화살표 함수였다면 불가능했겠지만 함수 선언문이기에 호이스팅 되면서 가능한 로직이죠. 현재 CRA 프로젝트 내부에도 핸들러 함수가 함수표현식, 화살표 함수, 함수 선언문 제각각 사용되었기에 충분히... 이런 로직이 있을 수 있는 상황입니다

저는 위와 같은 코드를 발견하고 나서는 불편함을 느꼈고 같은 팀원한테 state, function, effect순으로 작성하자고 말하려고 했습니다. 근데 갑자기 문득! 왜 state, function, effect으로 작성해야 하지? 그냥 그렇게 다들 당연하다듯 쓰니까? 만약 팀원이 왜 그렇게 작성해야 하는데요?라고 물어보면 난 뭐라고 대답해야 하지? 그러고 보니 진짜 왜지??? 라는 의문이 들더라고요. 

챗GPT에도 검색하고 이리저리 알아보니 이유는 단순합니다. 위에서 아래로 읽었을때 흐름이 딱 맞기 때문입니다.
우리가 어떠한 특정 값을 반환해주는 함수를 변수에 담아서 여기저기 사용하고 싶습니다. 그러면 가장 먼저 담을 수 있는 빈 그릇! 변수를 먼저 선언하겠죠? 그다음에는 변수에 담을 값들을 계산할 함수들을 구현할 겁니다. 그리고 React는 화면 갱신을 위해서 또는 다른 경우를 위해서(?) 컴포넌트가 마운트 된 이후에 처리할 실행 함수들을 effect문에 선언해 주는데요. 그러려면 위에 먼저 작성된 함수가 있고, 그다음에 실행될 effect문을 사용하는게 흐름상 맞습니다.
마치 우리가 책을 왼쪽에서 오른쪽으로 읽듯, 위에서 아래로 읽었을때 코드적 흐름이 이어진다는 겁니다. 

const PageComponent = () => {
    const [a, setA] = useState();

    const handleClick = () => {
        /* ... */
    };
    
    useEffect(() => {
        handleClick();
    }, []);
    
    const [b, setB] = useState();

    const handleChange = () => {
        /* ... */
    };

    useEffect(() => {
        handleChange();
    }, []);

    return ();
}

그러면 위에 코드도 맞는거 아니냐?라고 할 수 있는데... 위에 경우는 매우 단순한 상황인거고, 보통은 함수 1개가 여러 곳에서 호출될 수도 있고, 의존성 상태가 여러 개가 엮일 수 있는데 위와 같이 깔끔하게 1개가 하나만 한다로 떨어지긴 힘듭니다. 그러니 다들 state는 state대로 이어서 작성하고, function은 function끼리, effect는 effect끼리 나누는 거겠죠...?

아무튼 정말 간단한 내용인데... 개발자의 입장에서만 당연한 건지... 아무것도 모르는 노베이스가 왜 그래야 하는데요? 그게 그거 아닌가?라고 하면 막상 할 말이 사라지더라고요. 왜냐면 당연했으니까... 마치... 세미콜론 왜 붙여야 되는데요? 같은 질문? 물론 세미콜론은 논쟁이 있긴 하지만, 개발자 입장에서는 "일관된 코드"도 매우 중요하기에 우리는 이렇게 쓰자! 라는 규칙도 세우는 거고, 지금에서는 좋은 컴파일러~ 자동화~ 등등이 잘 되어있으니까 널널하게 작성해도 되는 부분들이 개발자의 입장에서는 "혹시 모르니까"를 늘 염두해둬야 합니다. 

 

아무튼....
코드는 마치 책처럼 읽을 수 있게 쓰자!