React STEP 6 - 컴포넌트 이해

⭐ 컴포넌트

• 컴포넌트란, 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위
• 컴포넌트를 파일 단위로 작성한 후, 필요한 위치에서 로드해서 사용할 수도 있습니다.

1. 컴포넌트 조합하기

• 단계 1

class Component2 extends React.Component {
  render() {
    return (
      <h2> This is imported Component. </h2>
    );
  }
}

class Component1 extends React.Component {
  render() {
    return (
      <div>
        <h1>React Example</h1>
        <Component2></Component2>
      </div>
    );
  }
}

root.render (
  <Component1></Component1>
)

• 단계2

class Component2 extends React.Component {
  render() {
    let h2Style={
      fontSize: 16,
      fontWeight: "normal"
    }

    return (
      <h2 style={h2Style}>This is imported Component</h2>
    )
  }
}

class Component1 extends React.Component {
  render() {
    let h1Style={
      fontWeight: "normal"
    }

    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Component2></Component2>
      </div>
    )
  }
}

root.render(
    <Component1></Component1>
)

 

2. 생명주기 함수 사용하기

• React에서 생명주기란, 컴포넌트의 생성, 변경, 소멸 과정을 뜻합니다.
• render(), constructor(), getDerivedStateFromProps(), componentDidMount() 함수들은 컴포넌트의 생성 과정에 속합니다.
• 생명주기 함수 render() 사용하기
• render() 함수는 return 되는 HTML 형식의 코드를 화면에 그려주는 함수, 화면 내용이 변경되어야 할 시점에 자동 호출

class LifeCycle extends React.Component {
  render() {
    let h2Style= {
      fontSize: 16,
      fontWeight: "normal"
    };

    console.log("3, render()");

    return (
      <h2 style={h2Style}>This is Render Function</h2>
    )
  }
}

class App2 extends React.Component {
  render() {
    let h1Style= {
      fontWeight: "normal"
    }
    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <LifeCycle></LifeCycle>
      </div>
    );
  }
}

root.render (
  <App2></App2>
)