항해99 - Week04 회고

React 리렌더링 발생 조건

state 값이 변하면 연관있는 컴포넌트 들이 재렌더링 된다.
부모 컴포넌트가 렌더링 될 때 자식 컴포넌트도 리렌더링 되며
부모 컴포넌트에서 받은 props값이 변경되면 자식요소까지 리렌더링 된다.

옵셔널 체이닝

?. 은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환

let user = {}; // 주소 정보가 없는 사용자

alert( user?.address?.street ); // undefined, 에러가 발생하지 않음

let user = null;

alert( user?.address ); // undefined
alert( user?.address.street ); // undefined

?. 은 ?. 바로 앞의 대상에만 동작되고, 확장은 되지 않는다.

옵셔널 체이닝을 남용하지 말 것 !
?.는 존재하지 않아도 괜찮은 대상에만 사용해야 한다.
사용자 주소를 다루는 위 예시에서 논리상 user는 반드시 있어야 하는데
address는 필수값이 아니므로 user.address?.street를 사용하는 것이 바람직하다.
실수로 인해 user에 값을 할당하지 않았다면 바로 알아낼 수 있도록 해야 하기 때문.
그렇지 않으면 에러를 조기에 발견하지 못하고 디버깅이 어려워진다.

옵셔널 체이닝 문법 ?. 세 가지 형태

• obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환
• obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환
• obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환

?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있다!\

참고자료
모던자바스크립트 옵셔널 체이닝 '?.'