[React-Native] props와 구조 분해 할당

교재 <리액트 네이티브 인 액션> 참고

 

🎯 Props

: 부모 컴포넌트로부터 상속받는 외부 데이터로서, 자식 컴포넌트에서는 값을 변경할 수 없다. 

 

 props는 다음과 같이 다룬다.

export default class MyComponent extends Component {
  render() {
    return <BookDisplay book="React Native in Action" />;
  }
}

class BookDisplay extends Component {
  render() {
    return (
      <View>
        <Text>{this.props.book}</Text>
      </View>
    );
  }
}

state를 이용하여 MyComponent의 내용을 다음과 같이 바꾸어 동적으로도 활용가능하다.

export default class MyComponent extends Component {
  state = {
    book: 'React Native in Action',
  };
  render() {
    return <BookDisplay book={this.state.book} />;
  }
}

 

 

 props는 자식 컴포넌트에서는 값 변경이 불가하므로, 부모 컴포넌트로부터 값을 변경할 수 있는 메서드도 전달받아야한다. 위의 예제 코드처럼 state의 데이터를 자식에게 넘긴 경우 아래와 같이 코드를 수정하여 자식 컴포넌트의 터치 이벤트에 따라 state의 데이터가 바뀌게 할 수 있다.

export default class MyComponent extends Component {
  state = {
    book: 'React Native in Action',
  };
  updateBook(){
    this.setState({
      book: 'Express in Action',
    })
  }
  render() {
    return <BookDisplay updateBook={this.updateBook()} book={this.state.book} />;
  }
}

class BookDisplay extends Component {
  render() {
    return (
      <View>
        <Text onPress={this.props.updateBook}>{this.props.book}</Text>
      </View>
    );
  }
}

지금 하는 과정을 크게 나눠 보자면 다음과 같다

1. 부모 컴포넌트에서 state지정 및 state 업데이트 메서드 정의
2. 자식 컴포넌트에게 전달(state가 props로 전달됨)
3. 자식 컴포넌트에서 전달받은 props 활용(터치 이벤트 핸들러로 등록, 화면에 출력, ...)

 

 

🎯 구조 분해 할당

:  ES2015 스펙에 추가된 자바스크립트의 새로운 특징으로, 객체에서 속성들을 가져와서 앱에서 변수로 사용할 수 있게 해준다. 

예시: person 객체에서 age 속성을 변수로 가져와 사용함.

const person = { name: 'charming-l', age: 22 };
const { age } = person;
console.log(age) #22

 

앞서 작성한 MyComponent를 자세히 보면 state와 props를 반복적으로 참조하고 있다. 이는 DRY 원칙(Don't Repeat Yourself)을 위배하게 되므로, 이때가 바로 구조 분해 할당이 필요한 시점이다.

export default class MyComponent extends Component {
  ⋯
  render() {
    const {book} = this.state
    return <BookDisplay updateBook={this.updateBook()} book={book} />;
  }
}

class BookDisplay extends Component {
  render() {
    const {updateBook, book} = this.props
    return (
      <View>
        <Text onPress={updateBook}>{book}</Text>
      </View>
    );
  }
}

위와 같이 state와 props비구조화를 통해 this.state나 this.props를 수시로 참조하지 않아도 되고, 직관적으로 이해하기도 훨씬 쉬운 코드가 되었다. 

 

BookDisplay 컴포넌트의 경우, stateless 컴포넌트로도 나타낼 수 있다. class를 해체하고, 다음과 같이 작성하면 된다

const BookDisplay = (props) => {
  const {updateBook, book} = props;
  return (
    <View>
      <Text onPress={updateBook}>
        {book}
      </Text>
    </View>
  );
};

혹은 props 인자를 받는 코드의 첫 줄에서 props 대신 {updateBook, book}를 작성하여 미리 구조 분해 할당이 가능하다.

클릭시 문구가 바뀜