[React] 함수형 컴포넌트 vs 클래스형 컴포넌트 비교(2)

원래 한 포스트에 다 쓰려고 했는데 생각보다 글이 길어져서 분리했다. 이번글에는 함수형 컴포넌트를 정리하고 함수형과 클래스형이 어떻게 다른지 비교해보려한다. 

 

<div id="root"></div>
        <script type="text/babel">
            const GuGuDan = () => {
                const [firstNum, setFirstNum] = useState(Math.ceil(Math.random() * 9));
                const [secondNum, setSecondNum] = useState(Math.ceil(Math.random() * 9));
                const [value, setValue] = useState("");
                const [result, setResult] = useState("");

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

                const onSubmitForm = (e) => {
                    e.preventDefault();
                    if (parseInt(value) === first * second) {
                        setResult( `정답  ${prevState.value}`),
                        setFirstNum( Math.ceil(Math.random() * 9)),
                        setSecondNum(Math.ceil(Math.random() * 9)) ,
                        setValue("")
                     
                    } else {
                        setResult(`정답은 ${this.state.value}!! 땡 `),
                        setValue("")
                        }
                    }
               
                return (
                    <React.Fragment>
                        <div>
                            {firstNum} 곱하기 {secondNum}{" "}
                        </div>
                        <form onSubmit={onSubmitForm}>
                            <input type="number" value={value} onChange={onChangeInput}></input>
                            <button type="submit"></button>
                        </form>
                    </React.Fragment>
                );
            };
        </script>

 함수형 컴포넌트는 함수선언 + 리턴  구조로 클래스보다는 간결하고 직관적이다. 기본적으로 써줘야하는 구성이 적기때문에 클래스컴포넌트 방식보다 코드길이는 좀더 짧다. 함수형에서는 state를 객체형식이 아니라 각각 다 분리해서 써주는게 좋다. 만약 값을 한번에 변경하는 때는 객체형식으로 써도 상관이 없지만, 객체 구성요소 중에 한개의 요소만 변경하고 싶을 때는 좋지 않은 방법이다. 왜냐하면 객체요소중에 한개만 변경하면 다른 구성요소들은 아예 state에서 삭제된 상태로 인식하기 때문이다. 그렇기 때문에 웬만하면 state 관리가 용이하게 분리해서 써주는게 좋다.

 

하지만 함수형 컴포넌트는 큰 단점이 있는데, 클래스컴포넌트는 렌더링 될때 렌더 부분만 렌더링이 되기 때문에 함수실행 코드를 렌더 밖으로 빼면 효율적인 코드를 짤 수 있었지만 함수형은 아무리 함수를 따로 써준다 한들 함수이기 때문에 처음부터 끝까지 렌더링 될때마다 모든 코드가 렌더링 된다. 이런점이 클래스와 구별되는 특징이다.

 

함수형 클래스형 그 어떤게 더 좋다! 할 순 없지만,,!!! 각각의 장단점이 있기 때문에,,ㅎㅎ 그래도 공식홈에서는 함수를 쓸것을 권장하고 있기 때문에 앞으로 리액트 프로젝트를 만들때는 거의 함수형을 이용할 듯하다.