state, data 질문..

Question

상태값을 저장하기 위해서 리액트에서는 state 뷰에서는 data를 사용하는 것으로 알고 있습니다. 이러한 상태값을 저장하기 위해 사용되는 것들에 저장되는 데이터들은 전부 화면에 관련된 것만 들어가는 것이 좋나요? 예를 들어서 뷰에서 data(){return { a: 1 }} 이러한 데이터를 화면에 관련된 데이터는아니지만 created와 methods에서 같이 사용하기 위해서 넣어도 괜찮은지 궁금합니다.

열씨미살자! · Answer

답변 감사합니다

제로초(조현영) · Answer

vue의 경우는 data안에 넣으셔도 상관 없습니다. data 중에서 template에 사용되는 것이 바뀔 때만 리렌더링되니까요. export default 바깥에 변수를 선언하면 그 변수는 템플릿들간의 공통 변수가 되어버려서 문제가 될 수 있습니다. 하나의 컴포넌트에서 그 값을 바꾸면 다른 컴포넌트에서도 그 값이 바뀌어버립니다. 이와 같은 이유로 리액트에서도 컴포넌트 내에서 useRef에 값을 넣어두는 게 좋습니다.

열씨미살자! · Answer

이렇게 그냥 created와 methods에서 같이 사용될 변수를 만들게 된다면 굳이 리랜더링을 신경써줘야하는 data에 넣지말고 이렇게 사용하라는 말씀이시죠 ? < script > const a = 1 ; export default { created () { console . log ( a ); }, methods : { b () { console . log ( a ); }, }, };

제로초(조현영) · Answer

데이터를 생각해볼때는 그 데이터가 굳이 그 컴포넌트 안에 종속되어야 하는가를 생각해보아야 합니다. 종속될 필요가 없다면 일반 객체나 배열, json 파일로 분리할 수도 있고요. 종속된다고 하더라도 렌더링과 관련없는 데이터는 굳이 state로 만들 필요가 없습니다. 그냥 일반 객체나 useRef 정도면 충분하니까요. state를 쓰면 리렌더링 관리를 해야 해서 귀찮아집니다.