[02] React - 문법01

Data 관리

(1) state 와 var,let의 차이

React에서는 var, let등을 사용하여 값을 저장해도 되지만 state 라는 방법을 사용하여 값을 저장할 수 있다.
state 를 사용하는 이유는 일반 변수와 달리 값이 변경되면 자동으로 변경된 데이터가 설정된 HTML을 렌더링 해준다
즉, 일반 변수의 변경된 값이 적용된 사이트를 보기 위해서는 새로고침이 필요했지만 state를 사용하면 그럴 필요가 없다.
따라서 state 방식을 사용한 값 저장은 자주 변경되는 데이터를 저장할 때 사용한다.

(2) state 생성

useState 함수의 인자로 (실제 저장할 데이터, 해당 데이터 변경 함수)

(Header.jsx)

import { useState } from "react"

export default function Header(){
    let [title, setTitle] = useState('Header Page')

    return(
        <div>{title}</div>
    )
}

(3) state 수정

state 값은 직접 변경이 불가능하며, 반드시 변경을 시킬 수 있는 함수를 사용하여 데이터를 변경해야한다.

(Header.jsx)
import { useState } from "react"

export default function Header(){
    let [title, setTitle] = useState('Header Page')

    return(
        <button onClick={()=>{setTitle('Change Page')}}>{title}</button>
    )
}

만약 배열이 state에 설정되어 있을 때 수정 방법

(Header.jsx)
import { useState } from "react"

function Header(){
    function ChangePage(){
        var newArray = [...title];
        newArray[0] = 'ChangePage';
        setTitle(newArray)

    }

    let [title, setTitle] = useState(['HeaderPage'])

    return(
       <button onClick={ChangePage}>{title}</button>
    )
}
export default Header

• 새 컴포넌트를 만든 후 새로운 변수 newArray에 Deep Copy시킨다.
• newArray의 첫번쨰 Index를 변경 후 setTitle(newArray)
• 이벤트리스너에 새 컴포넌트 넣기

---

Component 재사용

	function Header(){
      
      ...
      
          return(
        <>
        <button onClick={ChangePage}>{title}</button>
        <SubPage></SubPage>
        </>
    )
}

      function SubPage(){
          return (
              <>
              <div> Sub Page!</div>
              </>
          )
      }
	
		...
}

---

React 조건문

(1) 삼항연산자

React는 직접적인 if-else 구문을 사용할 수 없고 삼항연사자 를 사용해야 한다.

조건문 ? 조건이 참 일때 실행 코드 : 조건이 거짓일 때 실행 코드

import { useState } from "react"

function BtnToggle(){

    let [toggle, setToggle] = useState()

    return(
        <>
        <button onClick={()=> {setToggle(!toggle)}}>Change Btn</button>

        {
            toggle ? <SubPage></SubPage> : null
        }

        </>
    )
}

function SubPage(){
    return (
        <>
        <div> Sub Page!</div>
        </>
    )
}

export default BtnToggle

(2) Map

React는 for 구문을 사용할 수 없고 map을 사용하거나 함수를 정의하여 사용해야한다.

배열.map((요소,인덱스)=> { return 요소})

• 기본 map 사용법

import { useState } from "react"

function Title(){

    let [list, setList] = useState(['Title1','Title2','Title3'])

    return (
        <>
        {
            list.map(function(a,i){
                return(
                    <div>{list[i]}</div>
                )
            })
        }
        </>
    )
}

export default Title

• 함수를 정의한 반복문

import { useState } from "react"

function Title(){

    let [list, setList] = useState(['Title1','Title2','Title3'])

    function Show(){
        var showArray = []

        for (let i=0; i<3; i++){
            showArray.push(
                <div>{list[i]}</div>
            )
        }
        return showArray
    }
    return (
        <div>
            {Show()}
        </div>
    )
}

export default Title

• 정적인 문자열에 동적인 변수 설정 (이미지)

<img src={'https://hjc/img/test' + (props.i+1) + '.jpg'}/>