React 기본 1

리액트 설치

JSX 기본 규칙

JSX: 리액트에서 컴포넌트의 생김새를 정의할 때 사용하는 문법
보기엔 html처럼 보이나 실제로는 js이다.
babel이라는 도구로 js로 변환해준다.

1. 태그는 꼭 닫혀있어야 한다.
2. 두 개 이상의 태그는 꼭 하나의 태그로 묶어야 한다.
   • div 태그로 묶고싶지 않을 때 Fragment tag <> </> 사용
3. JSX 내부에서 JS값을 보여주고 싶을 때
   • {변수명}로 묶어준다.
4. style 지정 방법
   • 객체를 생성한다.
5. css 지정 방법
   • html에서는 class = "name" 으로 지정해줄 수 있었다.
   • 여기서는 className = "name" 으로 지정해 줄 수 있다.

• 4번 5번 예제

    import React from 'react';
    import Hello from './Hello';
    import './App.css';
  
    function App() {
    const name = 'react';
    const style = {
        backgroundColor: 'black',
        color: 'aqua',
        fonstSize: 24,
        padding: '1rem'
    };
    return (
        <div>
        <Hello/>
        <div style = {style}>{name}</div>
        <div className="gray-box"></div>
        </div>
    );
    }
  
    export default App;
  

6. 주석
   • {/**/}으로 가능
   • //으로 가능

컴포넌트에 값 전달하기

1. props를 이용

   • App.js

       import React from 'react';
       import Hello from './Hello';
       import './App.css';
     
       function App() {
       const name = 'react';
       const style = {
           backgroundColor: 'black',
           color: 'aqua',
           fonstSize: 24,
           padding: '1rem'
       };
       return (
           <div>
           <Hello name = {name} color = "red"/>
           <div style = {style}>{name}</div>
           <div className="gray-box"></div>
           </div>
       );
       }
     
       export default App;

   • Hello.js

       import React from "react";
     
       function Hi(props){
           return <div style={{
               color: props.color
           }}>안녕하세요? {props.name}</div>
       }
     
       export default Hi;

2. 비구조할당 (구조분해)

   • Hello.js

       import React from "react";
     
       function Hi({color, name}){
           return <div style={{
               color
           }}>안녕하세요? {name}</div>
       }
     
       export default Hi;

   • propts 기본값 설정

3. Children Props

   • 태그 사이에 값을 넣어줌
   • App.js

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

    function App() {
    return (
        <Wrapper>
        <Hello name = "MyTest" color = "red"/>
        <Hello color = "pink"/>
        </Wrapper>
    );
    }

    export default App;
    ```
- Hello.js
    ```js
    import React from "react";

    function Hi({color, name}){
        return <div style={{
            color
        }}>안녕하세요? {name}</div>
    }
    Hi.defaultProps = {
        name: '이름없음'
    }
    export default Hi;
    ```
- Wrapper.js
    ```js
    import React from 'react';

    function Wrapper({children}){
        const style = {
            border: '2px solid black',
            padding: 16
        };
        return (
            <div style={style}>{children}</div>
        )
    }
    export default Wrapper;
    ```

조건부 렌더링

• props로 받아와서 사용한다.
• 삼항 연산자로 출력
  • {isSpecial ? <b>*</b>: null}

    function Hi({color, name, isSpecial}){
      return (
      <div style={{
          color
      }}>
          {isSpecial ? <b>*</b>: null}
          안녕하세요? {name}
          </div>
      );
    }

• 논술 연산자로 출력
  • {isSpecial && <b>*</b>}

    function Hi({color, name, isSpecial}){
      return (
      <div style={{
          color
      }}>
          {isSpecial && <b>*</b>}
          안녕하세요? {name}
          </div>
      );
    }

useState를 통한 동적 상태 관리

• Counter.js

    import React, {useState} from 'react';
  
    function Counter(){
        const [number, setNumber] = useState(0);
  
        {/*const numberState = useState(0);
        const number = numberState[0];
        const setNumber = numberState[1];*/}
        const Increase = () => {
            setNumber(prevNumber => prevNumber + 1);
        }
        const Decrease = () => {
            setNumber(prevNumber => prevNumber - 1);
        };
        return (
            <div>
                <h1>{number}</h1>
                <button onClick={Increase}>+1</button>
                <button onClick={Decrease}>-1</button>
            </div>
        )
    }
  
    export default Counter;

  • const [number, setNumber] = useState(0);
    • useState는 배열을 반환하는데, 이를 풀어 쓰면 다음과 같다.

        const numberState = useState(0);
        const number = numberState[0];
        const setNumber = numberState[1];

  • setNumber(prevNumber => prevNumber + 1);
    • 성능 최적화와 관련있음.
    • 이와 같이 함수를 넣어 줄 수 있다.

Input 상태 관리

• 단일 Input

  • InputSample.js

      import React,{useState} from "react";
    
      function InputSample(){
          const [text, setText] = useState('');
          const onChange = (e) =>{
              setText(e.target.value);
          }
          const onReset = (e) => {
              setText('');
          }
          return(
              <div>
                  <input onChange = {onChange} value = {text}/>
                  <button onClick = {onReset}>초기화</button>
                  <div>
                      <b>값 </b>
                      {text}
                  </div>
              </div>
          );
      }
      export default InputSample;

• 다중 Input

  • 객체로 관리를 해주어야 한다.

  • InputSample.js

      import React,{useState} from "react";
    
      function InputSample(){
          const [inputs, setText] = useState({
              name: '',
              nickname: '',
          });
          const onChange = (e) =>{
              const {name, value} = e.target;
              setText({
                  ...inputs,
                  [name]: value,
              });
          }
          const onReset = (e) => {
              setText({
                  name: '',
                  nickname: '',
              });
          }
          return(
              <div>
                  <input name = "name" onChange = {onChange} value = {inputs.name}/>
                  <input name = "nickname" onChange = {onChange} value = {inputs.nickname}/>
                  <button onClick = {onReset}>초기화</button>
                  <div>
                      <b>값: </b>
                      {inputs.name}
                      <br/>
                      <b>값: </b>
                      {inputs.nickname}
                  </div>
              </div>
          );
      }
      export default InputSample;

  • const nextInputs = { ...inputs };

    • spread 문법
    • inputs의 데이터들을 nextInputs으로 복사한다.

  • onChange

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

    • 바뀐 대상의 이름과 값을 각각 저장해준다.
    • 원본을 ...inputs으로 복사해두고,
    • 바뀐 대상의 이름에 바뀐 값을 덮어씌운다.
      • 복사를 하는 이유는 불변성을 지키기 위함이다.