리액트
-
20221111 TIL 리액트는 언제 리렌더링을 할까?TIL 2022. 11. 11. 22:54
리액트를 사용할 때는 어떨 때 리액트가 리렌더링을 하는지 명확히 알고 있어야 우리가 원하는 UI를 제대로 만들 수 있다. 리액트에서는 props나 상태가 변경되었을 때 리렌더링이 일어난다. 그런데 '변경'을 리액트는 어떻게 인지할까? 리액트는 기존값과 현재 값을 Object.is()로 false인지 확인해서 변경이 되었는지 검사한다. Object.is()는 아래와 경우들에 true를 반환한다. 1. 두 값이 모두 undefined인 경우 2. 두 값이 모두 null인 경우 3. 두 값이 모두 true인 경우 4. 두 값이 모두 false인 경우 5. 두 값이 모두 문자들을 동일한 순서로 가진 동일한 길이의 문자열인 경우 6. 두 값이 모두 +0인 경우 7. 두 값이 모두 -0인 겅우 8. 두 값이 모두 ..
-
20221027 TIL 다양한 리액트 조건문 사용법TIL 2022. 10. 27. 12:00
회사를 다닐 때 동료분께서 이럴 때는 &&를 쓰면 돼요 라고 알려주신 적이 있었는데, 리액트에서 '조건 && 요소' 형태로 작성을 하셨는데, &&가 and연산자인 것은 알고 있었지만 &&가 true나 false를 반환하는 것으로 오해를 하고 있었어서 '조건 && 요소' 형태 코드를 해석할 수 없었다. 그런데 이제야 그 말씀을 이해할 수 있게 되었다. &&는 true / false를 반환하는 연산자가 아니고, 왼쪽부터 falsy한 값을 찾아서 찾으면 그 falsy한 값을 반환하고, 만약 마지막까지 모두 truthy면 마지막에 위치한 값을 반환한다. 즉, &&연산자는 A && B라고 작성했다면 if (A) { return B; } return A; 와 동일한 코드이다. '조건 && 요소' 형태는 조건이 tr..