[React] Props 와 State

1. Props(Properties)

 

기본적으로 Component 에 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없습니다. 주로 Component 의 '재사용' 을 위하여 사용합니다.

 

-Props는 읽기 전용입니다.

Props 의 값을 임의로 변경해서 사용하지 마세요. 만약 Props 값을 변경해서 사용하고 싶다면, 새로운 변수를 생성하세요.

 

-DOM Element 의 Attributes

• 기본적인 DOM Element (div, span 등)들의 Attribute는 camel case 로 작성합니다. 예) tabIndex, className 등
• 그러나 'data-' 또는 'aria-' 로 시작하는 Attribute 는 예외입니다. 예) data-type, aria-label 등
• HTML 의 Attribute 와 다른 이름을 가지는 Attribute 가 있습니다. 예) class-> className, for -> htmlFor 등
• HTML 의 Attribute 와 다른 동작 방식을 가진 Attribute 가 있습니다. 예) checked(defaultChecked) 등
• React에서만 쓰이는 새로운 Attribute 가 있습니다. 예) key, dangerouslySetInnerHTML 등

-HTML 과 다른 방식의 React Attribute (checked, value)

HTML 에서 checked 또는 value 는 해당 값이 '초기값'으로 쓰이지만 React 내에서는 현재 값을 의미합니다.

이 말은 즉, 위 예시처럼 checked 값이 false로 고정돼 있는 경우에 사용자가 checkbox를 클릭하여도 값의 변화가 일어나지 않습니다.

만약 '초기값'의 의미로, checked 또는 value를 사용하고 싶다면 defaultChecked, defaultValue, Attribute 를 설정하세요.

 

-React에서만 쓰이는 새로운 Attribute(key)

 

 

Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다.

 

Key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 Element 에 지정해야 합니다.

 

Key 는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없습니다.

 

두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있습니다.

 

 

2. State

 

 

State는 Component 내에서 유동적으로 변할 수 있는 값을 저장합니다.

 

개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있습니다.

State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링 합니다.

 

 

 

-State 값을 직접 변경하지 마세요.

 

 

 

State 값을 직접 변경하게 되면 React가 Component 를 다시 렌더링할 타이밍을 알아차리지 못합니다.

 

반드리 setState 함수를 이용해 값을 변경하세요.

 

setState 함수를 호출할 때 React에게 "다시 렌더링 해주세요~ " 라는 명령이 내려집니다.

 

 

 

-State를 변경하는 두 가지 방법

setState 함수에는 변경할 값을 직접 넣는 방법이 있고, 함수를 넣는 방법이 있습니다.

함수를 넣는 경우 함수가 반환(return) 하는 값으로 State가 변경됩니다.

위 예시처럼 현재 값을 기반으로 State를 변경하고자 하는 경우 함수를 넣는 방법을 권장합니다.

 

-Object 를 갖는 State를 만들 때 주의사항

 

 

 

예시와 같이 Object를 값으로 갖는 State도 만들 수 있습니다.

 

그러나 예시의 경우 React가 State의 변경을 감지하지 못합니다!

 

user object 안의 grade가 변경되었지만 user 자체는 변경되지 않았기 때문입니다.

 

 

 

 

-Object를 갖는 State를 만들 때 주의사항

왼쪽의 경우 user의 grade가 변경되었지만 user의 내용을 담는 object 자체가 변경된 것은 아닙니다.

오른쪽의 경우 기존 user의 내용을 새로운 object 에 담고 grade를 변경합니다.

 

-Object를 갖는 State를 만들 때 주의사항

이전 페이지의 설명을 코드로 작성해보면...