스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요?
회원가입 페이지 만들기(커스텀 훅) 강의를 듣던 중 질문 남깁니다.
스타일 객체를 컴포넌트 바깥에 적으면 리랜더링을 줄일 수 있나요?
강의에서 style props값을 넣어줄때 객체로 넣어주면 react는 {} === {} //false이기에 매번 다르게 인식해서 리랜더 돌기에 useMemo를 해주면 좋다고 들었습니다.
그런데, antd예시를 보니 style 객체를 컴포넌트 바깥에 두는 경우도 있더라구요.
import {
Button,
Form,
Input,
} from 'antd';
const tailFormItemLayout = {
wrapperCol: {
xs: {
span: 24,
offset: 0,
},
sm: {
span: 16,
offset: 8,
},
},
};
const App = () => {
const [form] = Form.useForm();
return (
<Form
form={form}
name="register"
>
<Form.Item
name="agreement"
valuePropName="checked"
{...tailFormItemLayout}
>
<Checkbox>
I have read the <a href="">agreement</a>
</Checkbox>
</Form.Item>
</Form>
);
};
export default App;이처럼 stlye에 담길 객체를 App 컴포넌트 바깥에 넣어두면 App이 랜더링되는 것과는 별개로 전역 선언된 거니까 리랜더 문제가 없는건 아닐까 궁금하여 문의 남깁니다.
한마디로 App이 호출되서 랜더링 될때 tailFormItemLayout는 바깥에 선언되어있으니 리랜더 될 일이 없지 않을까..?
강의 잘 듣고 있습니다. 현명한 질문을 한 건지 모르겠네요.
답변기다리겠습니다. 감사합니다.
답변 1
넥스트 버젼 질문
0
78
2
로그인시 401 Unauthorized 오류가 뜹니다
0
90
1
무한 스크롤 중 스크롤 튐 현상
0
177
1
특정 페이지 접근을 막고 싶을 때
0
103
2
createGlobalStyle의 위치와 영향범위
0
97
2
인라인 스타일 리렌더링 관련
0
92
2
vsc 에서 npm init 설치시 오류
0
148
2
nextjs 15버전 사용 가능할까요?
0
160
1
화면 새로고침 문의
0
123
1
RTK에서 draft, state 차이가 있나요?
0
154
2
Next 14 사용해도 될까요?
0
452
1
next, node 버전 / 폴더 구조 질문 드립니다.
0
349
1
url 오류 질문있습니다
0
211
1
ssh xxxxx로 우분투에 들어가려니까 port 22: Connection timed out
0
375
1
sudo certbot --nginx 에러
0
1281
2
Minified React error 콘솔에러 (hydrate)
0
470
1
카카오 공유했을 때 이전에 작성했던 글이 나오는 버그
0
247
1
프론트서버 배포 후 EADDRINUSE에러 발생
0
329
1
npm run build 에러
0
519
1
front 서버 npm run build 중에 발생한 에러들
0
383
1
서버 실행하고 브라우저로 들어갔을때 404에러
0
338
2
css 서버사이드 랜더링이 적용되지 않아서 문의 드립니다.
0
289
1
팔로워 3명씩 불러오고 데이터 합쳐주는걸로 바꾸고 서버요청을 무한으로하고있습니다.
0
240
2
해시태그 검색에서 throttle에 관해 질문있습니다.
0
202
1





