안녕하세요 리액트 1년차 개발자입니다.

Question

항상 개발을 하면서 가지던 질문인데, 시니어 개발자 분 말마다 달라서 그런데 어떤지 궁금합니다.만약 아래의 상황일 때 어떤 것이 베스트 일지 궁금합니다.예를 들어input 태그가 있을 때 input 태그에 value 를 state 로 준다면 사용자가 input 에 입력을 할 때 마다 렌더링이 될 것입니다.하지만input 태그를 ref 로 처리한다면 검색 버튼 같은 이벤트가 발생할 때 렌더링이 되고 끝나겠죠.이런 상황일 때 리액트는 ref 를 지양하라고 했기 때문에 state 로 처리하는 것이 맞는 것인지, ref 를 사용함으로써 렌더링을 줄일 수 있기 때문에 ref 를 사용해야하는 것인지 궁금합니다.

킁킁탐정 · Answer

렌더링 문제로 ref를 사용하면 성능에서 이득이지만 결과적으로 jQuery느 Vanilla와 차이가 거의 없게 됩니다.controlled 와 uncontrolled가 이미 존재하는데 굳이 단순한 문제로 ref를 사용하는것은 좋은 방법이 아닌거 같습니다.

나니야 · Answer

저도 그런거 하나하나 성능 영향 생각했던적이 있는데 실리적으로 생각해보면그거로 성능 별 차이가 없습니다. input 사용자 입력받는데 성능까지 고려할정도면 그게 컴퓨터인가요...?ref는 말씀하신것처럼 애지간하면 하지말라고 하는 말들이 너무 많기에(react 공식문서에서조차도)저는 그러한 하지말라는 짓 안하고 있습니다. 그런데도 ref를 쓰는 사람들의 경우는 대충대충 개발하는 사람일 확률(거의 JAVA,SPRING 오래 했던 연차 있는 사람일 것같네요. 스프링 대충대충하던 버릇)이 높죠. 제대로 개발하는것보다 일단 동작하는거에 중점인 분들이니까요.ref도 아마 제 생각으론 state 넣기도 귀찮고 자기들 판단으로 코드도 간단해보이니 그렇게 밀고 나가는것같네요.JSP에서 엔터 치면 submit되던 버릇이요.무튼 상황마다 다르니 베스트라고 하기가 그렇지만 입력폼으로 데이터 전송하는 경우에서 ref를 써본적이 거의 없고 안써서 불편한 적도 없습니다. cursor focus 줄 때나 쓰죠.대부분의 케이스에서도 ref보다는 state로 할 겁니다. 사용자 입력 한글자마다 validation 체크도 많이 하잖아요?form으로 날리다가 유효성검사 기능이라도 추가하면 다시 form을 빼건 중간에 form날리전에 뭘 추가하던 해야할것같네요.그리고 입력할때마다 렌더링 된다는건 잘못된게 없습니다. 당연히 화면의 여백에 키보드를 통해서 글자가 들어가면 새로 그리는건 당연합니다. 문제는 해당 컴포넌트와 함수외에 다른 것들까지 랜더링되는것이 문제죠.

doooss · Answer

state가 베스트 입니다. 한개의 인풋에 대한 리렌더링은 성능에 큰 영향이 없습니다. 여러개의 인풋은 보통 리렌더링 영향을 최소화 하기 위해 state 영향 범위를 좁히는 편입니다. 유명한 라이브러리들의 솔루션을 보면 대게 context로 전체 값 / 개별 인풋 값을 이중, 삼중으로 나눈 뒤 입력 에 따른 이벤트 처리를 최소 단위에서 하고 (ex validation), 전체 입력을 보내는 값은 blur 같은 이벤트가 발생할때 전체 값이 있는 context 에 dispatch 하거나 Form 에서 ref 를 이용해서 하위 영역 value 를 가져오는 식으로 리렌더링을 최소화합니다. react-hook-form 이나 rc-field-form 같은 라이브러리 의 소스 코드를 참고해보세요. &#43; 다만 리렌더링을 최적화 하는 것은 좋으나 꼭 필요한 지 생각 해 보세요. 위처럼 리렌더링을 잡는 경우 리렌더링 보다 해당 로직의 비용이 커질수 있습니다.

안녕하세요 리액트 1년차 개발자입니다.

3개의 답변

기술 목록