React - 클래스형 컴포넌트 / 함수형 컴포넌트 / Props

클래스형 컴포넌트

MyComponentClass.js

import { Component } from "react";

class MyComponentClass extends Component {
    render() {
        return (
            <>
                <h1>이름은 홍길동입니다.</h1>
                <h2>나이는 23살입니다.</h2>
            </>
        );
    }
}

export default MyComponentClass;

App.js

import MyComponentClass from './MyComponentClass';

function App() {
  return (
    <>
      <MyComponentClass />
    </>  
  );
}

export default App;

함수형 컴포넌트

MyComponentFunction.js

function MyComponentFunction(){
	return(
    	<>
        	<h1>이름은 홍길동입니다.</h1>
            <h2>나이는 26살입니다.</h2>
        </>
    );
}

export default MyComponentFunction;

App.js

import MyComponentFunction from './MyComponentFunction';

function App() {
  return (
    <>
      <MyComponentFunction />
    </>  
  );
}

export default App;

Props

: properties 줄임말

  컴포넌틔의 속성을 설정할 때 사용

  props 변수의 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정

  컴포넌트 자신은 해당 props 값을 읽기 전용으로 사용만 가능

<Parent>
		<Child 변수이름=변수값 변수이름=변수값></Child>
               ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 
                     props
</Parent>

App.js

import MyComponentClass from './MyComponentClass';
import MyComponentFunction from './MyComponentFunction';

function App() {
  return (
    <>
      <MyComponentClass name="신길동" />
      <hr/>
      <MyComponentFunction name="고길동" />
    </>  
  );
}

export default App;

클래스형 컴포넌트	함수형 컴포넌트
import { Component } from "react"; class MyComponentClass extends Component {     render() {         console.log(this);         console.log(this.props);⇐ 부모 클래스(Componet)에 정의된 속성         return (             <>                 <h1>이름은 {this.props.name}입니다.</h1>                 <h2>나이는 23살입니다.</h2>             </>         );     } } export default MyComponentClass;	function MyComponentFunction(props) { console.log(props);     return (         <>             <h1>이름은 {props.name}입니다.</h1>             <h2>나이는 23살입니다.</h2>         </>     ); } export default MyComponentFunction;
this.props	변수로 받아옴
import { Component } from "react"; class MyComponentClass extends Component {     render() {         const { name, age, nickname } = this.props;         // {name: '신길동', age: 23, nickname: '길동'}         return (             <>                 <h1>이름은 {name}입니다.</h1>                 <h2>나이는 {age}살입니다.</h2>                 <h2>별명은 {nickname}입니다.</h2>             </>         );     } } export default MyComponentClass;	function MyComponentFunction(props) {     const { name, age, nickname } = props;      return (         <>             <h1>이름은 {name}입니다.</h1>             <h2>나이는 {age}살입니다.</h2>             <h2>별명은 {nickname}입니다.</h2>         </>     ); } export default MyComponentFunction;
defaultProps 설정 import { Component } from "react"; class MyComponentClass extends Component {     render() {         const { name, age, nickname } = this.props; // {name: '신길동', age: 23, nickname: '길동'}         return (             <>                 <h1>이름은 {name}입니다.</h1>                 <h2>나이는 {age}살입니다.</h2>                 <h2>별명은 {nickname}입니다.</h2>             </>         );     } } MyComponentClass.defaultProps = {     name: '아무개',      age: 0,      nickname: '없음' }; export default MyComponentClass;	defaultProps 설정 function MyComponentFunction({ name, age, nickname }) {     return (         <>             <h1>이름은 {name}입니다.</h1>             <h2>나이는 {age}살입니다.</h2>             <h2>별명은 {nickname}입니다.</h2>         </>     ); } MyComponentFunction.defaultProps = {     name: '아무개',      age: 0,      nickname: '없음' }; export default MyComponentFunction;
props.children import './App.css'; import MyComponentClass from './MyComponentClass'; import MyComponentFunction from './MyComponentFunction'; function App() {   return (     <>       <MyComponentClass>         <i>어떤 내용</i>       </MyComponentClass>       <hr/>       <MyComponentFunction>         <i>또 어떤 내용</i>       </MyComponentFunction>     </>     ); } export default App; => <i> 어떤내용</i> 는 화면에 나오지 않음
import { Component } from "react"; class MyComponentClass extends Component {     render() {         console.log(this.props);         const { name, age, nickname } = this.props; // {name: '신길동', age: 23, nickname: '길동'}         return (             <>                 <h1>이름은 {name}입니다.</h1>                 <h2>나이는 {age}살입니다.</h2>                 <h2>별명은 {nickname}입니다.</h2>                 <div>{this.props.children}</div>             </>         );     } } MyComponentClass.defaultProps = {     name: '아무개',      age: 0,      nickname: '없음' }; export default MyComponentClass;	function MyComponentFunction({ name, age, nickname, children }) {     return (         <>             <h1>이름은 {name}입니다.</h1>             <h2>나이는 {age}살입니다.</h2>             <h2>별명은 {nickname}입니다.</h2>             <div>{children}</div>         </>     ); } MyComponentFunction.defaultProps = {     name: '아무개',      age: 0,      nickname: '없음' }; export default MyComponentFunction;