React 101 - 파트 2: 첫 번째 구성 요소

내 Javascript 시리즈 이후:

이제 React 학습 여정을 시작할 준비가 되었습니다 :)

아무것도 놓치고 싶지 않다면 팔로우를 클릭하세요. 전날 React 과정에서 배운 내용을 여기 Dev.to에 게시할 예정입니다.

더 이상 고민하지 않고 여기에 2일차 메모를 요약했습니다.

내 첫 번째 구성 요소

함수 이름 Welcome을 생성하여 첫 번째 React 구성 요소를 생성해 봅시다. React 구성 요소 이름은 항상 대문자로 시작합니다.

구성 요소를 다른 HTML 태그처럼 렌더링하려면 < > 안에 넣습니다.

function Welcome() {
  return <h1>Hello React!</h1>
}
ReactDOM.render(<Welcome />, document.querySelector('#app'))

이 구성 요소에 속성을 전달할 수도 있습니다.

function Welcome(props) {
  return <h1>Hello {props.name}</h1>
}
ReactDOM.render(<Welcome name="Mike"/>, document.querySelector('#app'))

이러한 속성은 객체(props)에 포함되며 js 객체는 논리를 이해하기 쉽게 만들기 위해 분해될 수 있습니다.

function Welcome({name}) {
  return <h1>Hello {name}</h1>
}
ReactDOM.render(<Welcome name="Mike"/>, document.querySelector('#app'))

구성 요소가 HTML 태그처럼 작동하기 때문에 내부에 무언가를 포함할 수도 있습니다.

그런 다음 구성 요소로 전달되는 콘텐츠는 소품 하위로 렌더링될 수 있습니다.

function Welcome({name, children}) {
  return <div>
      <h1>Hello {name}</h1>
      <p>{children}</p>
    </div>
}
ReactDOM.render(
  <Welcome name="Mike">Welcome to React</Welcome>, document.querySelector('#app'))

우리는 JSX를 div 태그로 둘러쌉니다. JSX 코드는 하나의 최상위 요소에만 래핑되어야 하기 때문입니다.

따라서 두 개의 헤더를 작성하려면 div 요소와 같이 상위 요소 안에 두어야 합니다.

클래스 구성요소

함수는 React에서 컴포넌트를 생성하는 한 가지 방법입니다. 클래스를 사용할 수도 있습니다.

class Welcome extends React.Component {
  render () {
      return <div>
          <h1>Hello {this.props.name}</h1>
          <p>{this.props.children}</p>
    </div>
  }
}
ReactDOM.render(<Welcome name="Mike">Welcome to React</Welcome>, document.querySelector('#app'))

마지막으로 다른 구성 요소를 호출하는 기본 구성 요소를 만들 수 있습니다.

function Home() {
    return <div>
        <Welcome name="Mike" />
        <Welcome name="John" />
    </div>
}
ReactDOM.render(<Home />, document.querySelector('#app'))

결론

오늘은 여기까지입니다. 아직 배워야 할 것이 많으니 내일 뵙겠습니다... 하나도 놓치지 않으려면 팔로우를 눌러주세요!

트위터에서 나를 팔로우하세요: