[TIL-06] optional-chaning, props, patterns

bvelog·2021년 5월 17일

code.camp

목록 보기

6/9

지난 주에 활용했던 freeboard를 활용해서 실무에서 주로 사용하는 폴더 구조인 container/presenter 패턴을 적용시키는 실습을 했다. 오늘 코드캠프에서 배운 내용은 아래와 같다.

optional-chaning
props
destructring (구조 분해 할당)
container-presenter / atomic 패턴

optional-chaning

지난 주, useQuery API를 사용해 DB로부터 받아온 데이터를 렌더링할 때, 조건부 렌더링을 사용해 'undefined' 에러를 해결했었다. React의 state가 컴포넌트 변수인 점을 활용한 건데, event로부터 받아온 값이 컴포넌트 변수인 setData에 할당되어, 해당 변수가 호출이 되면 rerendering하는 React의 개념을 활용했다.

 const [data, setData] = useState({
   writer: "",
   password: "",
   title: "",
   contents: "",
  }); // data의 디폴트 값은 "", 그러나...

 const onChangeInput = (event) => {
   const userData = { ...data, 
                     [event.target.name]: event.target.value };
   setData(userData);
 }; // 여기서 이벤트로 받아온 값들을 setData에 할당
   
   data && data.fetchProfile
// && 연산자의 성질을 활용, data.fetchProfile이 false일 때 data를 반환, 
// data.fetchProfile이 true일 때는 data.fetchProfile을 반환

그러나 이 방법에는 문제가 있다. 현재 코드는 단 한 가지의 상황만 존재해 && 연산자를 사용해도 전혀 문제가 없었다, 하지만... 만약 내가 원하는 코드가 fetchProfile에서 더 타고 들어가야 한다면? 예를 들어......

data.fetchProfile.name.firstname.surname
data && data.fetchProfile && data.fetchProfile.name && data.fetchProfile.name.firstname && data.fet.... 어쩌구!
// name이 없는 경우가 있다면? firstname이 없다면?

경우의 수만 봐도 벌써 머리가 아프다. 이런 고민을 한 번에 날릴 수 있는 방법이 있으니 그게 바로 optional-chaning이다.

optional chaining 연산자는 참조나 기능이 undefined 또는 null일 수 있을 때 연결된 객체의 값에 접근하는 단순화할 수 있는 방법을 제공한다.
let nestedProp = obj.first && obj.first.second;
let nestedProp = obj.first?.second;
let nestedProp = ((obj.first === null || obj.first === undefined) 
		? undefined : obj.first.second);
MDN: Optional chaning

optional chaning을 사용하면, 위의 data 케이스를 간단하게 정리할 수 있다.

data?.fetchBoard?.name?.firstname?.surname

Props & destructring (구조 분해 할당)

리액트는 크게 두 가지 특징이 있다.

선언형
컴포턴트 기반

리액트를 처음 접했을 때는, 어떻게 리액트가 UI 관리에 용이한지, 왜 컴포넌트 기반의 라이브러리인지 이해할 수 없었다.

개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
React: Components and Props

props는 부모 컴포넌트가 자식 컴포넌트에게 넘겨준 데이터와 기능등을 의미한다.

위의 그림은 오늘 미니 과제에서 사용했던 나의 코드이다. Component와 Props를 별개의 파일로 저장하여 관리하는 Container/Presenter 패턴을 사용했다. 이 패턴에 대한 내용은 밑에 이어진다.

앞서 우리는 props가 부모 컴포넌트로부터 자식 컴포넌트에게 넘겨준 데이터와 기능이라 설명했다. 즉 위의 그림대로라면 Container는 부모 컴포넌트이고, Presenter는 자식 컴포넌트가 된다. ViewUI는 Container인 QueryDetailPage 함수로부터 data 정보를 받아 ViewUI를 렌더링하게 된다. 이때 data는 props 가 된다.

여기서 한 가지 의문점이 생겼는데, props로 전달 받은 데이터는 props.원하는 데이터 형식으로 접근한다. 이 접근 방식은 Object의 value 값 접근 방식과 동일한데, 혹시 props를 디스트럭쳐링 할 수 있지 않을까, 생각이 들었다. 해서, props를 console.dir 해 보았다.