3. React (Props)

내가 생각하는 핵심 키워드

: Props, DOM Element, Attribute, Destructuring assignment(구조 분해 할당)

 

 

1. Props (속성, Property)

부모 컴포넌트로부터 받아온 데이터를 자식 컴포넌트에 전달할 때 사용

(컴포넌트의 재사용성을 위한 방식으로 재사용성이 크게 증가하며 효율적)

 

React 특징 중 하나인 단방향 데이터플로우(One-way reactive data flow) 형식이 적용

즉, 데이터 전달 시 부모 → 자식은 가능하지만, 자식 → 부모는 불가능함을 의미

 

이러한 특징으로 props에 있는 데이터는 수정이 불가능하며, 오직 꺼내서 사용만 가능하다

(읽기 전용을 의미, 만약 값을 변경하고 싶다면 새로운 변수를 생성 후 사용)

 

넘겨줄 수 있는 데이터 값으로는 변수, 함수, 객체, 배열 등 JS 요소는 제한없이 사용 가능

 

[Props 정리]

- Props의 데이터는 부모 컴포넌트 → 자식 컴포넌트로 전달

- Props가 변경되면 컴포넌트가 다시 렌더링

- Props로 전달할 수 있는 데이터는 JS로 표현가능한 모든 데이터

- Props로 전달받은 데이터는 재할당될 수 없다

  (JS 기준 문법적 오류는 아니지만, React는 변경된 데이터를 인식하지 못할 수도 있다)

 

 

2. DOM Element(요소)의 Attributes(속성)

1) 기본적인 DOM Element(div,span 등) camel case로 작성

   예) className, camelCase 등과 같이 이어지는 다음 문자열의 시작 알파벳 대문자 작성

 

2) "data-", "aria-"로 시작하는 Attribute는 예외

   예) data-type, aria-label 등

 

3) HTML의 Attribue와 다른 이름을 가지는 Attribute가 존재

   예) class → className, for → htmlFor 등

 

4) HTML의 Attribute와 다른 동작 방식을 가진 Attribue

   예) checked(defaultChecked), value(defaultValue), style(object) 등

 

HTML에서 checked, value는 해당 값이 "초기값"으로 쓰이지만 React에서는 "현재 값"을 의미

<input type="checkbos" checked={false} />

위 예시와 같이 checked의 값이 false로 고정된 상태라면 사용자가 클릭해도 변화가 발생하지 않는다

초기값의 의미로 사용하고 싶다면 반드시 defalut를 붙여서 camelcase의 형태로 사용

 

5) React에서만 쓰이는 새로운 Attribute

   예) key(array에 있는 값을 표현할 때 react가 인지하기 용이하게 도와주는 attribute) 등

 

[Key]

- React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는 역할

- 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element에 지정

- 배열 안, 형제 관계에서는 반드시 고유해야 하고, 전체 범위에서 고유할 필요는 없다

안정적 고유성 : Element의 key값이 각각 다른 것

배열 안, 형제 관계에서 고유해야하는 이유 : key값이 중복되면 인식 불가

 

[DOM Element의 Attribute 정리]

- 기본적인 DOM Element들의 Attribute는 camel case로 작성

- 일부 Attribute는 HTML과 그 형태가 다른 것들이 존재

   (이때, 'data-', 'aria-' 로 시작되는 Attribute는 제외)

- input element의 기본값을 사용시에는 반드시 defalut를 붙여서 사용

  (default를 붙이지 않는다면 현재 값을 고정값으로 사용하게 된다)

 

 

3. Props를 활용한 Component

컴포넌트를 활용할 때 부모 Element에서 자식 Element로 데이터가 흐를 수 있는건

Props를 사용하기 때문이다

 

* 함수 컴포넌트의 경우 함수의 첫 번째 인자(Argument)가 Props에 해당

 

HTML에서 Attribute로 String만 전달할 수 있지만,

JSX를 사용하는 컴포넌트의 경우 String 뿐 아니라 어떤 JS 표현식도 전달할 수 있는 장점이 있다

컴포넌트를 선언할 때 Destructuring assignment(구조 분해 할당)를 활용하여

조금 더 간결하게 Props를 받아올 수 있다

 

첫 번째는 매개변수에 값을 받아올 때부터 선언

두 번째는 함수 안에 변수의 형태로 username을 받아오는데 (누구로부터) props 와 같은 형태

세 번째는 가장 기본적인 형태의 props 사용

 

 

4. Object를 전달받는 Component

Object로 선언된 정보를 전달 받아 출력하는 컴포넌트

 

 

Property와 Attribute의 차이

1. Property

: html DOM 안에서 attribute를 가리키는(혹은 대신하는) 표현

 

2. Attribute

: html document/file 안에서 elements에 추가적인 정보를 할당할 때 사용

 

- Attribute는 정적으로 변하지 않고, Property는 동적으로 그 값이 변할 수 있다