React state, props, event bind

React 함수형 컴포넌트

import React, { useState } from 'react';

// 함수형 컴포넌트
// props 매개변수를 가진다 (컴포넌트 속성)
// props 는 어디까지나 전달받은 값
function App({name, age}) {

    // state
    // 컴포넌트가 가지고 있는 상태
    const [number, setNumber] = useState(1);

    return (
        <div className="hello-wrap">
            <p className="hello-wrap-content">Hello React World!!!!</p>
            <p>{`${name}은 ${age}살`}</p>
            <p>{number}</p>
        </div>
    );
    
}


export default App

- state : 컴포넌트 자신이 가지고 있는 상태(값)를 의미
state 는 해당 컴포넌트에서만 변경이 가능
함수형 컴포넌트에서는 useState 훅을 이용

import React, {useState} from 'react';

function Example() {
	
    const [num, setNum] = useState(1);

}

export default Example

• 우리는 Example 컴포넌트에 상태값 num 을 정의했습니다.
• Example 컴포넌트에서 setNum 을 이용하여 num 상태를 변경 할 수 있습니다.

- 저 문법은 구조분해할당 입니다.
- 배열 또는 객체의 속성(또는 인덱스)을 해체하여 그 값을 개별변수에다가 할당하는 문법입니다.

// Array

const array = ['a', 'b', 'c', 'd'];
const [first, second, third, fourth] = array;
console.log(first); // a

// Object

let obj = {
  name : "zero86",
  age : 1
};
const { name, age } = obj;

console.log(name);  // zero86

- props : 컴포넌트의 속성입니다. 속성이지만 상위 컴포넌트로 부터 전달받은 속성을 의미합니다. 함수형 컴포넌트에서는 매개변수로 props 를 받습니다.

import React from 'react';

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

export default Welcome

• props 는 단순한 객체이며, 구조분해할당으로 좀 더 우아하게 작성이 가능

import React from 'react';

function Welcome({name}) {
  return <h1>Hello, {name}</h1>;
}

export default Welcome

- event : 컴포넌트에 이벤트를 바인딩하여 처리한다. react 에서는 JSX 로 간단하게 작성이 가능하다.

import React, {useState} from 'react';

function Example() {
	
    const [num, setNum] = useState(1);
    
    return (
    	<div>
            {num}
        	<button onClick={() => setNum(num + 1)}>add num</button>
        </div>
    )

}

export default Example