[TIL/React] 2023/01/04

1. Props Part 1

'Component'라는 요소를 잘 활용하기 위해서는 'Props'의 개념에 대한 이해가 요구된다. 'Props'는 부모 컴포넌트로부터 받아온 데이터를 의미한다.

Mother 컴포넌트에는 '홍부인'이라는 이름을 가진 데이터가 있다. Child 컴포넌트가, 부모 컴포넌트인 'Mother' 컴포넌트로부터 받게 될 '홍부인'이라는 데이터가 바로 'Props'이다.

Mother 컴포넌트가 가지고 있는 '홍부인'이라는 데이터를 자식 컴포넌트인 Child 컴포넌트로 전달하기 위해서 첫째로 Child 컴포넌트가 'name'이라는 데이터를 인식하도록 해야 한다. 이를 위해 "motherName={name}"를 입력해준다. ~~중괄호는 자바스크립트니까 ㅇㅇ~~

Child에서도 props를 받는다고 알려줘야 하기 때문에, Child 컴포넌트에 파라미터로서 props를 추가해준다. console.log(props)를 통해 출력을 하게 되면, motherName이라는 키값으로 '홍부인'이 들어왔음을 개발자 도구를 통해 확인할 수 있다.

props객체 안에 존재하는 데이터에 접근하기 위해서는 다음과 같은 방식을 따라야 한다.

"{props.motherName}"이라는 자바스크립트 값을 넣어줌으로써 '홍부인'이라는 'value'를 가져올 수 있게 되었다.

위의 내용이 부모 컴포넌트에서 자식 컴포넌트로 props를 내려주고, 자식 컴포넌트에서 받아온 데이터를 사용하기까지의 전 과정이다. props는 오직 부모 컴포넌트에서 자식 컴포넌트 방향으로만 props를 전달할 수 있다.

2. Props Part 2

'Children'이라는 정보를 전달하는 방식도 있다.

'props part 1'에 의하면, "User hello='안녕하세요'"와 같은 형식으로 정보를 보냈어야 하지만, 위 예시에서는 '안녕하세요'를 User 태그로 묶어서 정보를 보내고 있다. 이것이 'Children props'를 보내는 방식이다. 자식 컴포넌트에서 정보를 받는 방식은 기존과 동일하다. 대신 이름이 'Children'으로 정해져 있을 뿐이다.

3. Props Part 3

'구조 분해 할당'을 'props'에 적용하면 props에서 값을 가져올 때 더욱 간편하면서도 가독성을 높일 수 있게 된다. 기존에는 props를 사용하는 모든 곳에서 'props.객체이름'의 형식으로 값을 가지고 왔다.

구조 분해 할당을 이용하면 다음과 같이 간결해진다.

중괄호 안에 객체의 'key name'을 적어주는 방식이다. 여러개의 props를 받는다면 중괄호 안에 여러개의 props를 그대로 써주면 된다.

구조 분해 할당과 더불어 'defaultProps'라는 개념이 있다. 'defaultProps'란, 부모 컴포넌트에서 props를 보내주지 않더라도 설정되는 '초기값'이다. 자주 받거나 무조건 받아야 하는 props가 없는 경우, 자식 컴포넌트에서 직접 임시로 사용할 props를 설정할 수 있는데 이것이 바로 'defaultProps'다.

부모 컴포넌트에서 데이터가 내려오기 전까지는 props가 defaultProps로 보여지게 될 것이고, 부모 컴포넌트에서 props가 내려오게 되면 defaultProps는 사라지고 내려받은 props로 값이 대체된다.

구조 분해 할당을 이용해서 객체에 직접 접근한 경우에 위와 같은 방법으로도 defaultProps를 설정할 수 있다.

회고

'구조 분해 할당'은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라고 한다. JS를 배우지 않아서 구조 분해 할당에 대한 이해가 없었기에 이전보다 강의 내용이 그리 선명하게 다가오지는 않았다. 모르는 개념은 차차 알아가면 되는 것이니, 우선은 강의를 '전체적인 맥락'에서 이해하는 것에 집중하자는 다짐을 했다.