Inflearn Community Q&A

asked

Learning React while making web games

4-1. React conditional statement

객체의 불변성에 대해서 질문드립니다.

Written on

222

state가 객체의 경우에는 복사를 활용해서 참조관계를 끊으면 되는 건가요? 그렇다면 자바스크립트 수업때 알려주셨던 JSON.parse(JSON.stringify())를 사용하면 되는 걸까요?

react

Quiz

React JSX에서 특정 조건을 만족할 때만 요소를 렌더링하려면 어떻게 해야 할까요?

`if (condition) { return <Element />; }` 와 같이 if 문을 직접 사용한다.

`condition && <Element />` 또는 `condition ? <Element /> : null` 과 같은 표현식을 사용한다.

`<Element if={condition} />` 와 같이 if 속성을 사용한다.

별도의 HTML 파일에 조건을 분리하여 작성한다.

Answer 1

Instructor

참조관계를 너무 다 끊어서도 비효율적입니다. JSON.parse(JSON.stringify())도 성능이 느린데다가 객체 내부의 객체마저 새로 만들면 어떤 컴포넌트의 props는 원래 변하지 않았는데도 새로운 객체가 생겨 리렌더링이 되어버립니다.

immer 라이브러리를 쓰는게 편합니다.

Questioner

답변 감사합니다. 그럼 객체를 사용하는 것 보다는 최대한 배열을 사용하는 쪽으로 구현하는게 더 편한 건가요?

Instructor

배열도 객체입니다. 똑같은 문제가 있습니다.

asked