[💎React] JSX, state

h-a-n-a·2023년 3월 1일

React

💎React

목록 보기

2/14

리액트 설치

yarn

페이스북이 개발한 패키지 관리자로, npm과는 또다른 패키지 관리자이다. 리액트의 대부분은 yarn을 토대로 개발이 이루어지고 있음.

vite

빌드 속도가 빠른 vite는 esbuild라는 번들러를 사용해서 기존의 방식에 비해 훨씬 더 빠른 번들링 속도를 가지고 있다.
yarn create vite (앱이름) --template react 라는 명령어로 시작!
주의:: 앱이름 안에서 yarn 시작해야 함! 폴더명 잘 확인하도록!

베리굿.

JSX

react에서 쓰이는 자바스크립트 확장 문법, 자바스크립트 기반으로 작성할 수 있도록 하느 문법이다. html코드는 Html 파일 안에, js 코드는 js 파일안에 쓰던 이전과 다르게, 이제는 js 파일 안에 자바스크립트와 html 모두를 슬 수 있다!

사용법

return () 안에 전체를 감싸는 부모태그가 하나 있어야 한다.
반드시 <div></div> 아니라 <></> 같이 빈태그여도 가능.
jsx 내부에서 외부자바스크립트 부분에서 선언한 변수나 함수를 쓸 때는 {}기호를 쓴다.

function App(){
const name='이혜원'

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

jsx 내부에서 html 태그요소에 class를 주고싶을 때는 className을 쓴다

function App(){
return (
 <div className="App">
 </div>
 )
}
export default App;

변수나 함수를 만들 때는 camelCase를 사용한다. 단, 컴포넌트를 생성할때는 반드시 첫글자는 대문자로 작성한다.

state

용도

중요한 데이터는 변수말고 state에 담는다.
생각해보면 변수에 담으나 state에 담으나 그게 그거 같은데 왜 state를 쓰는걸까?
state는 변동사항이 생기면 state를 쓰는 html도 자동으로 재렌더링해준다.
결론 : 이용자에게 표시되는 값이 상호작용에 따라 변경될 수 있도록 하기 위해서는 useState 가 꼭 필요하다!
개발자에게도 그냥 쌩자바스크립트로 변수에 담아놨으면 "변수에 담아놓은 내용 바뀌었으니, html도 고쳐달라"고 코드를 짰어야하는 불편함이 사라지게 된 것!!

state에 담는법

import {useState} from 'react'

let [a,b] = useState(a의 초기값)
a자리에 보관할 state이름을 자유롭게 작명한 다음 나중에 자유롭게 사용하면 된다.

결론! 자주 변경할 것 같은 데이터들은 state들은 html에 {데이터바인딩}해두기
굳이 변경할 일이 없는건 일반 변수에 저장해도 된다!

연습

state 생성, {데이터바인딩} 👇

import "./App.css";
import {useState} from "react";

function App(){
	let [커피,커피변경]=useState('아메리카노')
 	
    return (
      <div className="App">
      	<h4>{커피}</h4> 
	 </div>
	)
}
export default App;

필요한만큼 state 생성 👇

import "./App.css";
import {useState} from "react";

function App(){
	let [커피,커피변경]=useState('아메리카노')
 	let [커피2,커피변경2]=useState('카페라떼')

    return (
      <div className="App">
      	<h4>{커피}</h4>
        <h4>{커피2}</h4>
	 </div>
	)
}
export default App;

배열 destructuring 👇

import "./App.css";
import {useState} from "react";

function App(){
	let [커피,커피변경]=useState(['아메리카노','카페라떼'])

    return (
      <div className="App">
      	<h4>{커피[0]}</h4>
        <h4>{커피[1]}</h4>
	 </div>
	)
}
export default App;

onClick

onClick={} 이렇게 C는 대문자로 쓰고, {}을 사용해 {} 안에 실행할 함수를 넣어주면 된다.

연습

function App(){
	let [좋아요]=useState(0)
	function 좋아요변경(){
    console.log(1)}
    return (
    <div>
     <div onClick={좋아요변경}>{좋아요}</div>
     // 아니면 위에서 함수 만들 필요 없이
     // 바로 이 안에서 화살표 함수 사용하는것도 가능!
     // onClick={()=>{console.log(1)}}
    </div>
    )
  }

state 변경하는 법 : state 변경함수

let [보관할 state이름, state변경함수이름]=useState('보관할 자료')
state변경함수이름(새로운state)
state 변경함수는 ()안에 넣은 걸로 state를 갈아치워준다.

연습

state를 이용해 누를때 숫자가 1로 변경되게 하고 싶을때

let [좋아요,좋아요변경]=useState(0)

<div onClick={()=>{좋아요변경(1)}}>{좋아요}</div>
// onClick={좋아요변경(1)} 이렇게 적는 게 아니라, 함수 만들고 그 안에 state함수 적기

누를때마다 1씩 증가하게 하고 싶으면

<div onClick={()=>{좋아요변경(좋아요+1)}}{좋아요}</div>

위에서 공부했던 배열 destructuring이랑 state 결합시켜보기!

function App(){
	let [커피,커피변경]=useState(['아메리카노','카페라떼'])

    return (
      <div className="App">
      	<button onClick={()=>{커피변경(['에스프레소','카페라떼'])}}>누르면 커피변경됨</button>
      	<h4>{커피[0]}</h4>
        <h4>{커피[1]}</h4>
	 </div>
	)
}