본 자료는 Elice 플랫폼의 자료를 사용하여 정리하였습니다.

Props(Properties)

Props란?

• 기본적으로 Component에 원하는 값을 넘겨줄 때 사용
• 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소
• 주로 Component의 '재사용'을 위해서 사용

Props는 읽기전용이다.

• 변경하고 싶다면 새로운 변수에 할당하고 변경할 것

DOM Element의 Attributes

• 기본적으로 camel case로 작성한다.
• 'data-'또는 'aria-'로 시작하는 건 예외이다.
• HTML과 다른이름을 가진 Attribute가 있다.
  • class $\rarr$ className
• HTML의 Attribute와 다른 동작방식을 가진 Attribute가 있다.
  • checked(defaultChecked), value(defaultValue), style 등
• React에서만 쓰이는 새로운 Attribute가 있다.
  • key, dangerouslySetInnerHTML 등

State

State란?

• Component 내에서 유동적으로 변할 수 있는 값을 저장
• 개발자가 의도한 동작에 의해 변할 수 있고, 사용자의 입력에 따라 새로운 값으로 변경될 수 있다.
• State가 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부분을 렌더링한다.

State 값을 직접 변경하면 안된다.

• 변경하고 싶다면 setState를 사용하자

State를 변경하는 두 가지 방법

• setState에 변경할 값 넣기
  • setState(count + 1)
• setState에 함수를 넣기
  • setState((current) => { return current + 1 })

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

• 재렌더링을 위해 새로운 Object에 복사하고 값을 변경한다.
  • 복사하지않고 그냥 사용하면 안된다.