인프런 커뮤니티 질문&답변

const TextAreaStyle = {
  resize: 'none',
  height: 120,
  marginBotton: 5,
};

function EditPostCard() {
  return (
    <>
      <TextArea rows={4} style={TextAreaStyle} />
      <Space wrap>
        <Button type="primary">수정</Button>
        <Button type="primary" danger>취소</Button>
      </Space>
    </>
  );
}

export default EditPostCard;

컴포넌트 밖에서 스타일객체를 선언한 경우


function EditPostCard() {
  const TextAreaStyle = useMemo(() => ({
    resize: 'none',
    height: 120,
    marginBotton: 5,
  }));

  return (
    <>
      <TextArea rows={4} style={TextAreaStyle} />
      <Space wrap>
        <Button type="primary">수정</Button>
        <Button type="primary" danger>취소</Button>
      </Space>
    </>
  );
}

컴포넌트 안에서 useMemo를 사용한 경우

리렌더링때문에 스타일을 따로 선언해주었는데요.

두 가지 경우가 큰 차이가 있나요? useMemo안 쓰고

컴포넌트 밖에다 선언해줘도 상관없나요?