[React.js] 속성이란?

속성이란?

클래스의 멤버변수 ( 클래스 내부 다양한 타입의 변수 )

 

React 컴포넌트의 속성

컴포넌트는, UI를 구성하는 "클래스" 이므로, 속성을 가질 수 있다.

리액트는 컴포넌트의 속성이 바뀌면, 즉시 화면에 반영한다. ( 재렌더링 )

 

JSX는 XML이므로, 모든 속성(attribute)는 따옴표 혹은, 중괄호로 감싸져야 한다.

<Component name="Jack" age={23}/>

 

속성값이 객체일때는 중괄호를 하나 더 사용해, 새로운 객체를 만들 수 있다.

<Component person={{name: 'Jack', age: 23}}/>

 

기본 속성

React와 React Native의 컴포넌트는

key, children, ref 등의 속성을 기본적으로 가진다.

 

key 속성

React가 컴포넌트의 렌더링 속도를 최적화하기 위한 속성

 

style 속성

React가 컴포넌트의 스타일을 지정하기 위한 속성

( 객체를 설정해야한다. )

<SafeAreaView style={{
  flex: 1,
  backgroundColor: 'blue'
}}>

 

ref 속성

React가 컴포넌트의 리액트 요소(객체)를 얻을 수 있도록 하는 속성

( 전달된 요소에 객체를 넣어준다. )

const TestRef;

<View ref={TestRef}>
  <Text>Hello</Text>
</View>

 

React 컴포넌트의 이벤트 속성

이벤트 속성 : 이름에 on이 붙는 속성

( onPress, onChangeText... )