[본캠프] REACT2. Component(붕어빵)

주의) component는 항상 대문자로 시작해야 한다.

 

 

컴포넌트 종류

함수형 컴포넌트 

function MyComponent() {
    return <h1>Hello, World!</h1>;
}

클래스형 컴포넌트

class MyComponent extends React.Component {
    render() {
        return <h1>Hello, World!</h1>;
    }
}

 

---

function App() {
  return (
    <div>
      <h1>부모자식관계테스트</h1>
      <Grandfa />
    </div>
  );
}

function Grandfa() {
  return <div>
    <p>나는 할아버지입니다.</p>
    <Moder />
  </div>
}

function Moder() {
  return (<div>
    <p>나는 엄마입니다.</p>
    <Child />
  </div>
  );
}

function Child() {
  return (
    <p>나는 자식입니다.</p>
  )
}

export default App;

 

 

rafce엔터하면 됨 그러고 안에 짜르륵 넣어주면 끝.

import React from 'react'

const App = () => {
  const pTagStyle = {
    color: 'orange',
    fontSize: '200px',
  }
  const number = 1000;
  const arr = [1, 2, 3, 4]
  return (
    <div>첫번째 줄 {number}
      {/* <input type='text'></input> */}
      <div id='abc'
        className='abc'></div>
      {/* {arr.map(function(){
    })} */}
      <p style={pTagStyle}>두번째줄</p>
    </div>
  )
}

export default App

 

---

컴포넌트에 대해 구조적으로 이해가 안되길래 더 공부해보았다.

컴포넌트 트리

1. 부모-자식 관계: React에서는 컴포넌트가 부모-자식 관계로 구성된다. 한 컴포넌트가 다른 컴포넌트를 포함할 수 있으며, 이를 통해 계층 구조를 형성한다.
2. 렌더링 흐름: 부모 컴포넌트가 렌더링될 때, 그 안에 포함된 자식 컴포넌트들도 자동으로 렌더링 된다.

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App1() {
  return (
    <div>
    //Greeting 2번 호출되어 출력.
      <Greeting name="Alice11" />
      <Greeting name="Bob11" />
      //App2의 Greeting이 2번 호출되어 출력.
      <App2 />{/*App2호출*/} //props됨
      //App3의 Greeting이 2번 호출되어 출력
      <App3 />{/*App3호출*/} //props됨
    </div>
  );
}
function App2() {
  return (
    <div>
      <Greeting name="Alice22" />
      <Greeting name="Bob22" />
    </div>
  );
}
function App3() {
  return (
    <div>
      <Greeting name="Alice33" />
      <Greeting name="Bob33" />
    </div>
  );
}

 

 

 

만약에 App3호출을 App2에 해둔다면?

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}


function App1() {
  return (
    <div>
      <Greeting name="Alice11" />
      <Greeting name="Bob11" />
      <App2 />{/*App2호출*/}
      
    </div>
  );
}
function App2() {
  return (
    <div>
      <Greeting name="Alice22" />
      <Greeting name="Bob22" />
      <App3 />{/*App3호출*/}
    </div>
  );
}
function App3() {
  return (
    <div>
      <Greeting name="Alice33" />
      <Greeting name="Bob33" />
    </div>
  );
}

 

렌더링 흐름이 다를 뿐이지 결과는 같다.

*렌더링? 컴포넌트가 반환하는 JSX코드가 실제 DOM에 변환되어 하면에 표시되는 과정을 말한다.
하지만 REACT에서의 렌더링이란, 컴포넌트가 반환하는 내용을 기반으로 UI를 구성한다는 의미도 될 수 있지만 부모 컴포넌트가 렌더링되면 그 안에 포함된 자식컴포넌트들도 자동으로 렌더링된다는 의미도 있다.

function Greeting(props) {
    return <h1>Hello, {props.name}!</h1>;
}

function App() {
    return (
        <div>
            <Greeting name="Alice" />
            <Greeting name="Bob" />
        </div>
    );
}

// ReactDOM.render(<App />, document.getElementById('root'));

렌더링 과정, 

1. App컴포넌트가 호출되어 JSX를 반환한다.

2. Greeting컴포넌트가 두 번 호출되어 'Hello, Alice!',  'Hello, Bob!'이 반환된다.

3. 반환된 내용을 바탕으로 실제 DOM이 업데이트되어 화면에 표시된다.