리액트 컴포넌트 스펙(specification)

혼자 공부하면서 정리한 글입니다. 오류가 있다면 알려주시길 바랍니다 🙇🏻

스펙(specification)
컴포넌트의 생명주기 동안 일어나는 여러 상황에 대해 컴포넌트가 대응하는 방식을 제공

컴포넌트 스팩에는 다음과 같은 것이 있다.

• render 메서드
• constructor 메서드
• statics 객체(클래스에서 사용할 수 있는 메서드를 정의할 때 사용)

render()

render() 는 컴포넌트가 생성될 때 필수적으로 필요한 유일한 메서드이다.
하나의 자식 요소나 null 혹은 false 만을 반환한다.
반환하는 자식 요소는 View나 Text처럼 이미 선언된 컴포넌트이거나, 개발자가 만들어 파일로부터 가져온 사용자 정의 컴포넌트이다.

render() {
	return(
    	<View>
        	<Text>Hello</Text>
        </View>
    )
}

괄호가 있거나 없는 채로 render()을 사용할 수 있다.

render() {
	return <View><Text>Hello</Text></View>
}

render()는 다른 곳에서 정의한 컴포넌트를 반환할 수도 있다.

render() {
	return <SomeComponent />
}
#or
render() {
	return(
    	<SomeComponent />
    )
}

render()에서 조건문을 확인하고 로직을 수행하고, 값에 따라 다른 컴포넌트를 반환할 수 있다.

render() {
	if(something === true) {
    	return <SomeComponent />
    } else return
    	<SomeOtherComponent />
}

속성 초기화와 생성자

속성 초기화

state는 생성자에서 만들 수도 있고 속성 초기화(property initaliser)를 사용해서 만들수도 있다.
props 초기화는 리액트 클래스에서 state를 선언하는 간결한 방법을 제공한다.

class MyComponent extends React.Component {
  state = {
    someNumber : 1,
    someBoolean : false
  }

생성자

클래스를 사용하면서 생성자를 사용해 초기 state를 지정할 수 있다.
컴포넌트 클래스의 생성자에서 다른 속성들도 this.property와 같은 문법으로 설정할 수 있다.

constructor() {
  super()
  this.state = {
    someOtherNumber: 19,
    someOtherBoolean :true
  }
  this.name = 'Hello World'
  this.type = 'class'
  this.loaded = false
}

리액트의 클래스는 다른 클래스를 확장해서 만들어지기 때문에 생성자를 이용할 때는 반드시 super를 this전에 써야한다.
생성자 안에 있는 특정 props에 접근해야한다면 생성자와 super 호출시에 인수로 전달되어야 한다.

constructor(props) {
  super(props)
  this.state = {
    fullName: props.first + ' ' + props.last
  }
}

props를 이용해서 상태를 지정하는 것은 의도적으로 컴포넌트의 내부에서 사용하는 기능들의 초기 데이터(seed data)를 지정하는 게 아니라면 일반적으로 좋은 방식은 아니다. 컴포넌트들 사이에서 데이터가 변경되면 더이상 값이 유지되지 않기 때문이다.

state는 컴포넌트가 처음 마운트 되거나 생성될 때만 생성된다. 만일 동일한 컴포넌트를 서로 다른 props의 값을 이용해서 다시 랜더링하게 되면 이미 마운팅 된 컴포넌트의 인스턴스는 새로운 props의 값으로 상태를 갱신할 수 없다.

위 코드는 생성자 내에서 props를 사용해 state의 값을 지정하고 있다.
처음에 props로 컴포넌트에 "리액트 네이티브"를 전달한다고 가정했을 때 컴포넌트의 state는 fullName : "리액트 네이티브"가 된다.
그 다음 컴포넌트가 "리액트 어쩔티브"로 재랜더링되면 생성자는 두 번 호출되지 않기 때문에 fullName의 state 값은 "리액트 네이티브"으로 그대로 유지된다.