https://react.vlpt.us/basic/03-first-component.html 참고

component

• Hello.js

import React from 'react';

function Hello() {
	return <div>Hello </div>
}
// 다른 component에서 얘를 사용할 수 있도록
export default Hello;

사용할 땐 import Hello from './Hello';

• App.js

import React from 'react';
import Hello from './Hello';

function App() {
	return (
    	<div>
      		<Hello/>
      	</div>
    );
}

JSX

import React from 'react';
import Hello from './Hello';
import './App.css';


function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
       {/* 주석은 화면에 보이지 않습니다 */}
      <Hello />
      <div style={style}>{name}</div>
      <div className="gray-box"></div>
    </>
  );
}

export default App;

Props로 컴포넌트에게 값 전달하기

App component에서 Hello component를 사용할 때 name이라는 값을 전달해주고 싶다면,

• App.js

import React from 'react';
import Hello from './Hello';

function App() {
	return (
    	<Hello name="react"/>
    )
}

• Hello.js

import React from 'react';
function Hello(props) {
	return <div> Hello {props.name}</div>
}

defaultProps

컴포넌트에 props를 지정하지 않았을 때 기본적으로 사용할 값

• Hello.js

import React from 'react';

function Hello({ color, name }) {
	return <div style={{color}}> Hello {name}</div>
}
Hello.defaultProps={
	name: '이름없음'
}
export default Hello;

props.childeren

컴포넌트 태그 사이에 넣은 값을 조회할 땐 props.children을 조회

useState

컴포넌트에서 바뀌는 값 관리하기
ex 사용자 인터렉션에 따라 바뀌는 값

• Counter.js

import React, { useState } from 'react';

function Counter() {
  
  const [number, setNumber] = useState(0);
  
   const onIncrease = () => {
    	setNumber(number+1);
     	// setNumber(prevNumber => prevNumber + 1)
    }
   
    const onDecrease = () => {
    	setNumber(number-1);
    }
    
    return (
    	<div>
      		<h1>{number}</h1>
      		<button onClick={onIncrease}>+1</button>
			<button onClick={onDecrease}>-1</button>
      	</div>
    )
}

input

하나일때

- inputSample.js
import React, { useState } from 'react';

function InputSample() {
	const [text, setText] = useState('');
  	const onChange = (e) => {
    	setText(e.target.value);
    };
  	return (
    	<div>
      		<input onChange={onChange} value={text}/>
      		<div>
      			<b>값 : {text}</b>
      		</div>
      	</div>
    
    )
}

export default InputSample;

여러개일 때

import React, {useState} from 'react';

function InputSample() {

    const [inputs, setInputs] = useState({
        name : '',
        nickname: ''
    });

    const {name, nickname} = inputs;

    const onChange = (e) => {
        const {value, name} = e.target;
        setInputs({
            ...inputs,
            [name]: value

        })

    }
    const onReset = (e) => {
        setInputs({
            name : '',
            nickname : '',
        })
    }
    

    return (
        <div>
            <input name="name" placeholder="이름" onChange={onChange} value={name}/>
            <input name="nickname" placeholder="닉네임" onChange={onChange} value={nickname}/>
            <div>
                <b>값: </b>
            {name}({nickname})
            </div>
            <button onClick={onReset}>초기화</button>
        </div>

    )
}

export default InputSample;

React 상태에서 객체를 수정해야 할 때에는 inputs[name] =value 로 직접 수정하면 안된다. 
→ 불변성을 지키는 것

불변성을 지켜줘야 component에서 상태가 업데이트됐음을 감지하여, 리렌더링이 진행됨. 
직접 수정할 경우 값을 바꿔도 리렌더링이 되지 않음
+ 불변성을 지켜야 컴포넌트 업데이트 성능 최적화가 가능

** 리액트에서 객체를 업데이트 할 때에는 기존 객체를 
수정하면 안되고, 새로운 객체를 만들어서 새 객체에 변화를 줘야 함.