React #3 Components 와 Props

React #3

 

함수 컴포넌트

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

 

클래스 컴포넌트

class classComponents extends React.Component {
	render() {
    	return <h1>Hello, {this.props.name}</h1>;
    	}
    }

 

• React 관점에선 위 코드의 함수 컴포넌트와 클래스 컴포넌트는 동일한 컴포넌트이다.

 

컴포넌트 렌더링

function funcComponent(props) {
  return <h1>안녕, {props.name}</h1>;
}

const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <funcComponent name="쏜" />;
root.render(element);

• 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 속성과 자식을 해당 컴포넌트에 단일 객체(
  porps)로 전달한다.

1. <funcComponent name="쏜" /> 엘리먼트로 root.render() 호출 후
2.  name="쏜" 를 porps 하여 funcComponent 컴포넌트를 호출
3.  funcComponent 는  <h1>안녕, 쏜</h1> 엘리먼트를 반환

 

컴포넌트 합성

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

function App() {
  return (
    <div>
      <funcComponent name="Son" />
      <funcComponent name="Minjae" />
      <funcComponent name="Gang in" />
    </div>
  );
}

1.