[리액트] 복습

<Say.js>

import React, { useState } from 'react';

const Say = () => {
    // 배열 비구조화 할당 문법 : const array = [1,2];   >> const[1,2] = array;
    
    const [ message, setMassage ] = useState('');   //배열 비구조화 할당 문법
    // useState('')의 인자(매개변수:숫자, 문자열, 객체, 배열)가 state의 초기값을 설정한다.
    // userState()를 호출하면 배열이 반환된다. 첫번째 배열의 원소가 현재 상태(state)이고, 두번째 배열의 원소가 상태를 바꾸어 주는 세터함수(setState)이다.

    const onClickEnter =  () =>  setMassage("안녕하세요."); // { setMassage("안녕하세요.") } => 괄호는 생략 가능하다.
    const onClickLeave =  () =>  setMassage("안녕히가세요.");

    return (
        <div> {/* 부모요소 */}  
            <button onClick = { onClickEnter }>입장</button> {/* {onClickEnter} == props*/}
            <button onClick = { onClickLeave }>퇴장</button>
            <h1>{ message }</h1>{/* 변수에 들어있는 값을 출력할 때는 코드블럭 내부에 적는다. */} 
        </div>
      ); 
};

export default Say;

<Counter.js>

import React, { Component } from 'react';

class Counter extends Component {
        constructor(props) {    
            // 생성자는 props를 컴포넌트의 state로 설정할 때 생성자를 사용한다.
            //  props는 읽기 전용이므로 값을 변경할 수 있는 state로 설정한다.
            super(props);   //생성자를 사용하면 state 초기값을 props로 설정한다.
            // super는 상위 클래스를 참조한다. 즉 Component 클래스를 가리킨다.
            // super(props)는 Component 클래스의 생성자에 props를 전달한다.

            this.state = { number:0, value:0 }; // 컴포넌트의 state는 객체 형식(= 코드블럭,{})이어야한다.
            // this.state 에 객체 형식으로 초기값을 설정한다.
        }
        render() {
            const { number, value } = this.state;  // state를 참조할 때 this.state를 참조한다.
            // state의 number와 value의 초기값을 가져온다.
            return (
                <div>
                    <h1>{ number }</h1> {/* state의 number에 해당하는 값을 출력한다. */}
                    <h1>{ value }</h1>
                    {/* onclick 을 통해서 버튼이 클릭될 때 호출할 함수를 지정한다.+1 버튼을 클릭하면 this.setState()를 사용해 state에 새로운 값을 넣는다. 
                    이때 반드시  이벤트 함수는 {}안에 화살표 함수로 작성한다.  */}
                    <button onClick= { () => { this.setState({number : number+1}); } }>+1</button>  {/* { () => { this.setState({number : number+1}); } } == props */}
                    <button onClick= { () => { this.setState({value : value+2}); } }>+2</button>
                </div>
            );
    }
}

export default Counter;

 

<App.js>


// import React, { Component } from 'react';
import React from 'react';
import Counter from "./Counter";  // Counter 컴포넌트를 불러온다.
import Say from "./Say";

const App = () => {
  return (
    <div>
    <Counter />
    <Say />
    </div>
  );   // App에서 Counter 컴포넌트를 렌더링한다.
  // 1. retun의 JSX 에서 컴포넌트 한개면 괄호 필요 없고 컴포넌트 두개 이상이면 괄호( ) 무조건 넣어야한다.
  // 2. 컴포넌트 두개를 반환할 수 없기 때문에 부모 <div> 요소를 무조건 넣어줘야함
  // 3. import 작업
  // 4. export 작업
};

export default App;   // 웹 브라우저로 내보낸다.