[React] 리액트 기초 예시 -2

6. PropTypes

props구성 요소에는 React에서 호출되는 많은 특정 속성이 있으며 모든 유형이 될 수 있습니다.

때때로 이러한 props를 검증하는 방법이 필요합니다. 사용자가 구성 요소에 아무 것도 입력할 수 있는 자유를 원하지 않습니다.

React에는 이에 대한 솔루션이 있으며 이를 PropTypes라고 합니다.

class MyTitle extends React.Component {
  static propTypes = {
    title: PropTypes.string.isRequired,
  }
  render() {
    return <h1> {this.props.title} </h1>;
  }
}

위의 구성 요소 MyTitle에는  title있습니다. PropTypes는 제목이 필수이고 값이 문자열(PropTypes.string.isRequired)이어야 한다고 React에 알려줍니다.

이제 Title숫자 값을 지정합니다.

var data = 123;

ReactDOM.render(
  <MyTitle title={data} />,
  document.getElementById('example')
);

이는 props가 유효성 검사를 통과하지 못했고 콘솔에 오류 메시지가 표시됨을 의미합니다.

Warning: Failed propType: Invalid prop titleof typenumbersupplied toMyTitle, expected string.

실행결과

PS props에 기본값을 지정하려면 defaultProps.

class MyTitle extends React.Component {
  constructor(props) {
    super(props)
  }
  static defaultProps = {
    title: 'Hello World',
  }
  render() {
    return <h1> {this.props.title} </h1>;
  }
}

ReactDOM.render(
  <MyTitle />,
  document.getElementById('example')
);

7. DOM 노드 찾기

때로는 구성 요소에서 DOM 노드를 참조해야 합니다. React는 ref에 의해 생성된 인스턴스에 DOM 노드를 연결하는 속성을 제공합니다 React.createRef().

이 구성 요소가 DOM에 마운트된 후에만 수행할 수 있다는 점에 유의하십시오. 그렇지 않으면 null.

8. this.state

React는 구성 요소를 상태 기계로 생각하고 구성 this.state요소의 상태를 유지하고 구성 요소 this.setState()를 업데이트 this.state하고 다시 렌더링하는 데 사용합니다.

onClick, onKeyDown, onCopy등과 같이 구성 요소 속성을 사용하여 이벤트 핸들러를 등록할 수 있습니다 

this.state가 false 일때 var text = haven\'t liked

this.state가 true 일때 var text = like

9. this.state

React의 디자인 철학에 따르면 this.state구성 요소의 상태를 설명하고 사용자 상호 작용을 통해 this.props변경되며 구성 요소의 속성을 설명하고 안정적이고 변경할 수 없습니다.

이후 value, <input>, <textarea>, <option>과 같은 Form 컴포넌트의 속성은 사용자 입력에 영향을 받지 않습니다. 사용자 입력에 대한 응답으로 값에 액세스하거나 업데이트하려면 onChange 이벤트를 사용할 수 있습니다.

실행결과

10. 구성 요소 수명 주기

구성 요소에는 수명 주기 의 세 가지 주요 부분이 있습니다 . 마운팅(DOM에 삽입됨), 업데이트(재 렌더링 중) 및 마운트 해제(DOM에서 제거됨). React는 이러한 수명 주기 부분에 대한 후크를 제공합니다. will메서드는 일이 발생하기 직전에 호출되고 did메서드는 일이 발생한 직후에 호출됩니다.

실행결과

11. Ajax

서버 또는 API 공급자로부터 구성 요소의 데이터를 가져오는 방법은 무엇입니까? 대답은 Ajax를 사용하여 의 이벤트 핸들러에서 데이터를 가져오는 것입니다 componentDidMount. 서버 응답이 도착하면 데이터를 저장 this.setState()하여 UI를 다시 렌더링하도록 합니다.

호출된 url을 통해 얻은 result 라는 변수의 값으로 결과 값을 가져와서

해당 값의 [0]번째를 lastGist로 할당해서 해당 값에서 html_url값과 owner.login값을 가져와서 state 상태값에 세팅하여서 사용합니다.

 

 

예시 코드들이 있는 git repository입니다.

https://github.com/skarbgud/react-demos

GitHub - skarbgud/react-demos