[항해99] TIL D+22

건강이 최우선이다

• 아니 무슨 내 몸은 뭐만 살짝 잘못들어가거나 무리를 해도 바로 탈이 나는지
• 참 정직한 몸이다..
• 가끔은 대충 먹어도 탈안나고 그럼 좋을텐데
• 근데 또 원인과 결과가 확실하니 그건 좋다
• 지금은 괜찮다

리덕스

• useSelector
• useDispatch
• reducer
• action
• store
• 각각의 용어들의 정의와 그 쓰임새를 잘 기억하고 있어야겠다.

옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?

옵셔널 체이닝이란

• Optional Chaining은 ES2020에서 등장한 새로운 연산자로서'?.'의 형태로 사용하며 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있는연산자이다.
• 체이닝 연산자와 비슷하게 동작하지만, 만약의 참조가 null 혹은 undefined여도 에러식을 뱉지 않고 undefined값을 리턴한다.
• 함수 호출시에도 마찬가지로 값이 없다면 undefined를 리턴한다.
• Optional chaining을 사용하므로써 문법의 가독성이 올라가고 한결 간결한 표현식으로 작성할 수 있게 된다.
• 속성값이 존재한다는 확실한 보증이 없을 경우 그 객체를 탐색하는 데 도움을 준다.

예제코드

const animals = {
	cat: {
    	  name: "나비"
		    },
  lion: {
    	   name: "호랑이"
        }
 }

const dogName = animals.dog?.name;

console.log(dogName); // 결과는??

• 위 코드에서 찍히는 console.log는 undefined이다.

옵셔널체이닝을 사용하는 경우

const nestedProps = obj.first && object.first.name

• 이처럼 중첩구조를 가진 object에서 객체의 속성값을 찾기 위해선 이런식으로 참조를 확인하여야 했었다.
• 논리 연산자 &&를 이용하여 좌항 연산자가 truty한 경우에만 object.first.name을 불러올 수 있었다.
• 하지만 이를 간단이 하여서

const nestedProps = obj.first?.name;

• 으로 표현하여 first의 값이 존재하면 name을 반환하고 없으면 undefined를 반환한다.
• 이를 풀어서 해석하면

const nestedProp = ((obj.first === null || obj.first === undefined) ? undefined : obj.first.name);

• 이런 식이 될 수 있겠다.