[React] 컴포넌트

* 컴포넌트 -> 함수형 컴포넌트, 클래스형 컴포넌트

function 이름 () {

                return <>;

}

const 이름 = () => {

                return <>;

}

class 이름 extends Component {

                render() {

                                return()

                }

}

 

* props -> properties를 줄인 표현, 컴포넌트 속성

자식 컴포넌트를 사용하는 부모 컴포넌트에서 설정해서 자식 컴포넌트에게 전달

 

const App = () => {

                return

                <div>

                                <MyComponent name ="green" age="20">

                                              <h3>하하하하하</h3> 

                                </MyComponent>

                </div>

}

 

cosnt MyComponent = (props) => {

        const name = props.name

        const age = props.age;

        const { name, age } = props;

              return

}

 

cosnt MyComponent = ({ name, age, children }) => {

              return <div>

                            제 이름은 {name}입니다.

                            제 나이는 {age}입니다.

                            {children}

              </div>

}

MyComponent.defaultProps = {

              name: '기본이름',

              age: '20',

}

import PropTypes from 'prop-types';

MyComponent.propType = {

              name: PropType.string

}

class Mycomponent extends Component {

              const { name, age, children } = this.props;

              render(

                            return()

              )

}

 

* state 컴포넌트 내부에서 바뀔 수 있는 값 -> state가 변경되면 화면을 다시 그림

-> state가 변경되면 화면을 다시 그림

import { useState } from 'react';

const MyComState = () => {

              const [countNum, setCountNum] = useState(0);

              ❌ countNum = 20;   // 이케 바로 수정 불가능

              setCountNum(20)   // setCountNum이라는 함수를 통해 countNum에 접근

}

 

함수형 컴포넌트

useState import

const [state, setState] = useState(초기값);

 

class형 컴포넌트

state 접근 this.state

state 변경 this.setState({})

 

class MyComState extends Component {

              constructor(){      // 첫번째 방법

                            this.state = {

                                        countNum: 0,

                            }

              }

                           or

              state = {              // 두번째 방법

                            countNum: 0

              }

 

              render() {

              const { countNum } = this.state;

                            return (

                                          <div>

                                                        <h1>{countNum}</h1>

                                                        <button onClick={()=>{

                                                                      this.setState({countNum: countNum+1})

                                                        }}

                                                                      >+1</button>

                                          </div>

                            )

              }

}

 

 

 

-------- 복습 --------

2022.05.23 - [Coding/JavaScript] - [JS] 구조분해 할당

[JS] 구조분해 할당

 ----------------

 

 

 

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
// 컴포넌트를 페이지에 랜더링을 해줌

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

App.js

// import logo from './logo.svg';
import './App.css';
import React from 'react';
import CounterF from './CounterF';
// import Counter from './Counter';
// import MyComponent from './MyComponent';
// import MyComponentClass from './MyComponentClass';

function App() {
  // const name = "리액트";
  return (
    // JSX에서 자바스크립트 표현식을 사용하려면 {}로 감싼다.
    // if문 대신 조건부연산자 - 삼항연산자를 사용 
    <div className='react'>
      <CounterF></CounterF>

      {/* <Counter></Counter> */}

      {/* <MyComponentClass name="classGreen" age={30}>
        <h3>children</h3>
      </MyComponentClass>
      <MyComponentClass></MyComponentClass> */}

      {/* <MyComponent name='Green' age='30'/><h3>여러분</h3><MyComponent/>
      <MyComponent name='Blue' age={50}/><h3>새과목</h3><MyComponent/>
      <MyComponent/><h3>하하하</h3><MyComponent/> */}

      {/* <h1>{name == '리액트' ? (<span>리액트입니다.</span>) : (<span>리액트가 아닙니다.</span>) } 안녕!</h1> */}
      {/* <h2>하이하이</h2>
      <input type="text"></input> */}
    </div>
  );
  // return React.createElement("div", null, "Hello", React.createElement("b", null, "react"));
}

export default App;

 

MyComponent.js

// const MyComponent = () => {
//     return <div>새로운 컴포넌트 생성</div>
// }

// function MyComponent() {
//     return <div>새로운 컴포넌트 생성</div>;
// }
// export default MyComponent;
import React from 'react';

// rsc
const MyComponent = ({name, age, children}) => {
    // const {name, age, children} = props;
    return (
        <div>
            안녕하세요 제 이름은 {name}입니다.<br/>
            제 나이는 {age}입니다.<br/>
            {children}
        </div>
    );
};
// const MyComponent = (props) => {
//     const { name, age } = props;
//     return (
//         <div>
//             안녕하세요 제 이름은 {props.name}입니다.<br/>
//             제 나이는 {props.age}입니다.
//         </div>
//     );
// };

// props 기본값 설정
MyComponent.defaultProps = {
    name: "기본이름",
    age: 1,
};
export default MyComponent;

 

MyComponentClass.js

import { Component } from "react";

class MyComponentClass extends Component {
    render() {
        const { name, age, children } = this.props;
        return (
            <div>
                제이름은 {name}입니다.
                나이는 {age}입니다.
                {children}
            </div>
        );
    };
}
MyComponentClass.defaultProps ={
    name: '기본이름',
    age: 20,
    children: "aaa",
}
export default MyComponentClass;

 

Counter.js

import { Component } from "react";

class Counter extends Component {
    // 컴포넌트 생성자 메서드
    // 클래스형 컴포넌트에서 constructor를 작성시 필수 super(props)
    // 리액트의 component 클래스가 지난 생성자 함수를 호출 !
    // constructor(props) {
    //     super(props);
    //     this.state = {
    //         number: 0,
    //         fixedNumber: 0,
    //     }
    // }
    state = {
        number: 0,
        fixedNumber: 0,
    }
    render() {
        const {number, fixedNumber} = this.state;
        return (
            <div>
                <h1>{number}</h1>
                <h2>바뀌지 않는 값: {fixedNumber}</h2>
                <button onClick={ ()=> {
                    this.setState({number: number+1},()=>{
                        console.log('setState가 호출되었습니다.');
                    });
                }}>+1</button>
            </div>
        );
    }
}
export default Counter;

 

CounterF.js

import React, { useState } from 'react';

const CounterF = () => {
    // useState 함수를 호출하면 배열을 반환해줌
    // 배열의 0번째에는 초기값
    // 배열의 1번째에는 이 값은 업데이트 해주는 함수

    const [message, setMessage] = useState('안녕');
    const onClickenter = () => setMessage('안녕하세요!');
    const onClickLeave = () => setMessage('안녕히가세요!');
    console.log(useState(0));
    return (
        <div>
            <button onClick={onClickenter}>입장</button>
            <button onClick={onClickLeave}>퇴장</button>
            <p>{message}</p>
        </div>
    );
};

export default CounterF;

 

EventPractice.js

import { Component } from "react";

class EventPractice extends Component {
    state = {
        message: '',
    }
    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input type="text" name="message" placeholder="아무거나 입력하세요"
                onChange={(e)=>{
                    this.setState({
                        message: e.target.value
                    })
                    console.log(e.target.value);
                }}></input>
                <button onClick={()=>{
                    console.log(this.state.message)
                }}>확인</button>
            </div>
        )
    }
}
export default EventPractice;