팀원 정보

<aside> 🔐 Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요?

</aside>

먼저, 컴포넌트에서 값을 변경하기 위해서 액션을 호출하는데, 이 때 디스패치를 사용합니다.

그 다음 리듀서가 어떤 타입의 액션이 일어났는지 확인하고, 값을 반환하여 스토어에 저장합니다.

이제 컴포넌트 A가 구독했던 값을 스토어를 통해 넘겨 받습니다.

구독 : 스토어에서 컴포넌트로 데이터를 보내는 행위를 구독이라고 부릅니다. 컴포넌트는 스토어에서 데이터를 넘겨 받을 수 있고, 이것을 ‘구독한다’ 라고 말합니다.

액션 : 컴포넌트에서 데이터를 변경하여 스토어에 전송하고 싶을때 선언하는 객체입니다. 액션은 액션 타입과 변경해줄 값을 가지고 있습니다.

디스패치 : 스토어의 내장 함수 중 하나로 액션 객체를 넘겨줘 상태를 업데이트하는 것입니다.

<aside> 🔐 Q2. 옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?

</aside>

옵셔널 체이닝은 참조가 null 또는 undefined일 경우, 에러를 반환하는 것이 아닌, 평가를 멈추고 undefined 리턴값을 반환하는 것입니다. 예를 들어 함수를 호출하였는데 해당 함수가 존재하지 않는다면 undefined를 리턴하여 참조값에러를 막아줍니다. 보통 해당 참조가 누락 될 가능성이 있는 경우, 객체의 내용을 탐색하는 도움을 줄 수 있습니다.

예시01) 해당이용자가 etc > etc_info관련 데이터가 없는 경우( etc_info 상위속성값이 없는 상황)

데이터 중 etc데이터가 선택적으로 작성될때, 아래와 같이 user에 etc 정보가 없을 수 있습니다.

거기에 etc관련 하위 속성들이 존재할 경우, 이를 뿌려주는 페이지에서 에러가 발생합니다.

// 이용자 데이터 샘플 
const user_info = {
// user의 경우 etc 정보가 없는 경우
    user:{
      name: "user2",
      age: "user2",
      adress: "user2",
      etc: {
      }
    }
  }
  console.log(user_info.user.etc.etc_info.value1) //오류발생

해당 코드에서 null, undefined 검증하기 위해서는 && 연산자를 사용하여 다음과 같이 접근 했었습니다.