[React] JSX구문, 함수형 컴포넌트의 props, children, Hook함수 - useState사용하기

React : 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리

 

react 장점 

1. 컴포넌트 단위 개발 (생산성 향상, 유지 / 보수 용이)
2. 싱글 페이지 어플리케이션 (사용자 경험 개선)
3. 높은 인지도

 

JSX 구문

- 하나의 태그로 감싸줘야 한다 (감싼 태그 안에 똑같은 태그를 감싸면 오류, 빈 태그로 감싸도 됨)
- 무조건 셀프 클로징! (태그는 꼭 닫혀 있어야 한다)
- 자바스크립트의 변수를 쓰고 싶을 땐 중괄호로 감싸서 사용
- 주석의 형태 ☞ {/*  주석주석주석 /*}

 

1.  props : 부모 컴포넌트에서 자식 컴포넌트에게 값을 전달하는 하나의 객체 (단방향 전송)

 

Hello컴포넌트에 쓰고 싶은 값들을 App컴포넌트에 props객체 만들어줌 !

 

☞ Hello 컴포넌트에 props객체가 생성됨 {name : "green"} , {message :  "안녕"} 이런 식으로 ..!

props객체의 key값으로 접근하여 값을 전달해줌

 

⭐  props객체 구조분해할당 사용하기 ⭐

// props 객체의 key값을 새로운 변수(name, message)에 할당하여 접근
// props 객체에 담겨있는 값
// props = {
    //{
    	//name: "green",
    	//message: "안녕"
     //}
// }
// props = {
    //{
    	//name: "blue",
    	//message: "반가워"
     //}
// }// props = {
    //{
    	//name: "yellow",
    	//message: "피곤해"
     //}
// }
function Hello({name, message}) {
    return (
    <>
        {/* name 변수를 쓰고 싶을 때 중괄호로 감싸준다 ! */}
        {/* 클래스 주고 싶을 때 => calssName="이름" */}
        <div className="hello">{name}님 안녕하세요.</div> 
        <p>{message}</p>
    </>
    )
        
}

// App 컴포넌트의 안의 Hello컴포넌트 각각의 props로 값을 전달받아 출력해줌!

 

☞ 컴포넌트명.defaultProps : props의 기본 값 설정

// 컴포넌트명.defaultProps : props의 기본 값 설정
Hello.defaultProps = {
    name: "이름",
    message: "반가워"
}

 

 

☞ children 사용하기

1) Wrapper컴포넌트로 Hello컴포넌트를 감싸줬다

import Hello from './components/Hello';
import Wrapper from './components/Wrapper';

function App() {
  return (
    <div className="App">
    <Wrapper>
         <Hello name="green" message="안녕" isSpecial={true}/>
         {/* isSpecial에 값을 설정 안하면 기본 값은 true다 */}
         <Hello name="blue" message="반가워" isSpecial/>
         <Hello name="Yellow" message="재미있어" isSpecial={false}/>
         <Hello name="red" message="굿굿"/>
         <Hello message="하하하 이름 기본값으로 저장"/>
     </Wrapper>
    </div>
  );
}

export default App;

import React from 'react';

const Wrapper = () => {
    return (
        <div>
            <h2>children을 배워봅시다.</h2>
        </div>
    );
};

export default Wrapper;

결과는 ..?

짜잔 Hello 컴포넌트가 아무 것도 안 뜬다 ..

 

2) 여기서 Wrapper컴포넌트에 children을 사용해보자

import React from 'react';

const Wrapper = ({children}) => {
    return (
        <div>
            <h2>children을 배워봅시다.</h2>
            {children}
        </div>
    );
};

export default Wrapper;

결과는 ..?

짜잔 children을 써준 위치에 출력된다 !

 

 

2. 상태 state : 동적인 값 (리액트에서 DOM이벤트 연결하고 싶을 때)

 

컴포넌트에서 동적인 값을 '상태'(= state)라고 함, 리액트에서는 useState함수를 사용하여 상태를 관리한다.

- useState함수는 배열을 리턴함

- 리턴된 배열의 형태 ☞ [새로운상태, 새로운 상태를 업데이트 해주는 함수]

- 상태를 변경 해주고 싶으면 상태 업데이트 해주는 함수를 호출하여 상태를 변경해줘야 한다

 

ex) const [number,setNumber] = useState(0); 

// 이 때 number의 초기 상태는 0, 초기 상태에서 1을 더해주고 싶다 

→ number + 1; (❌)

→ setNumber(number + 1);  (⭕)

 

1) 리턴 하는 상태 값이 하나일 때 

// 리액트가 가지고 있는 useState함수를 쓰겠다..는 뜻
import React, {useState} from 'react';

const Counter = () => {
    // const numberArray = useState(0);
    // const number = numberArray[0];
    // const setNumber = numberArray[1];

    // 배열 구조분해할당하기
    // [상태변수명, 상태업데이트해주는함수명] = useState(상태 초기 값)
    const [number, setNumber] = useState(0);
    const onIncreasse = () => {
        setNumber(number +1);
        console.log(number);
    }
    const onDecreasse = () => {
        setNumber(number -1);
        console.log(number);
    }
    return (
        <div>
            <h2>{number}</h2>
            <button onClick={onIncreasse}>+1</button>
            <button onClick={onDecreasse}>-1</button>
        </div>
    );
};

export default Counter;

 

2) 리턴하는 상태 값이 2개 이상일 때

import React, { useState } from 'react';

const InputSample = () => {
    // 배열 구조분해할당
    // useState함수의 초기 값에는 객체가 담김 !
    const [inputs, setInputs] = useState({
        username: '',
        usernickname: ''
    });
    // 객체 구조분해할당 (inputs객체 각각의 key값으로 다시 추출)
    const {username, usernickname} = inputs;
    const onChange = (e) => {
        // 이벤트 발생 시 value에는 입력 값이 담기고, name에는 username / usernickname 이 담김
        const {value, name} = e.target;
        setInputs({
            // 원래 있던 배열을 뿌려주고
            ...inputs,
            // 원래 있던 값은 유지, 새로운 값만 덮어줌
            // 객체의 key값들이 담긴 변수를 써주고 싶을 땐 대괄호 사용 !
            [name]:value
        })
    }
    const onReset = () => {
    	 // onReset함수에는 다시 빈 문자열이 담긴 객체를 리턴해줌 
        setInputs ({
            username: '',
            usernickname: ''
        })
    }
    return (
        <>
            {/* input value={usrename} =>  input value의 상태의 초기 값이 담김 */}
            <input name="username" onChange={onChange} value={username}/>
            <input name="usernickname" onChange={onChange} value={usernickname}/>
            <button onChange={onReset}>초기화</button>
            <div>
                <span>값 : {username}, {usernickname}</span>
            </div>
        </>
    );
};

export default InputSample;