[React] 기초 개념 (2)

• DOM에서 JSX를 렌더링 하기 위해서 ReactDOM이라는 API를 사용한다.
  컴포넌트를 렌더링하고 싶을 때도 마찬가지로 ReactDOM을 사용한다.

ReactDOM.redner(componentToRender, targetNode)

괄호 안에 들어가는 첫번째 변수는 렌더링 하고자 하는 컴포넌트이고, 두 번째 변수는 컴포넌트와 함께 렌더링 하고자 하는 DOM 노드이다. (어느 위치에 렌더링 하고 싶은지라고 생각하면 될 듯)

 

 

• JSX를 렌더링 할 때와 조금 다른 점은, JSX는 요소의 이름만 변수로 넣어줬다면, 컴포넌트는 구문을 통으로 적어주면 된다. ES6 class 컴포넌트, 함수화 컴포넌트 모두 이렇게 해준다.

ReactDOM.reader(<ComponentToRender/>, targetNode)
ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'))

 

 

• 많이 쓰게 될 거라 익혀야 하는 기본 폼 예시

//ES6 class 스타일로 컴포넌트 생성하기
class Car extends React.Component {	
  constructor() {
    super();
    this.state = {color: "red"};
  }
  render() {
    return <h2>I am a Car!</h2>;
  }
}

 

 

React 기초 개념 이미지