[React.js] JSX, useState에 대하여

❗ JSX문법

JSX 문법이란 JavaScript 파일 안에서 HTML을 직관적으로 작성하기 위해 도와주는 React 기본 내장 문법이다.

1. class 선언

대표적으로 두드러지는 문법은 class인데, React에서는 class라는 키워드를 사용할 수는 없고

className이라고 사용해야한다.

2. Data-Binding

Data-Binding은 JavaScript 데이터를 HTML에 넣는 작업을 뜻한다.
Front-end, Web-App 개발 시 Data-Binding할 작업이 많은데 React는 이걸 매우 쉽게 구현 할 수 있다.

 // JS
<div id="title">  </div>

<script>
	document.getElementById("title").innerText = "제목"
</script>

 // React
function App() {
  
  let [title] = useState("제목");
  return (
    <div className="App">
    	<div className="nav">
    		<div> {title} </div>
		</div>
    </div>
)

이런식으로 중간에 {중괄호}를 사용하면 변수로 선언한 내용을 넣을 수 있고 HTML 속성들에도 Data-binding이 가능하다.

HTML 중 style속성은 {속성명: 속성값}를 넣어야하고 속성명에 camelCase로 치환해줘야한다.

<div style = { {color: 'black' marginBottom: '10px'} }> 테스트 </div>

이렇게 일일이 style 속성에 선언하면 번거로우니까 위에 style={변수명}으로 넣거나,
CSS파일에 class를 만들어 사용하도록 하자!

let css_test= {color: 'black' marginBottom: '10px'}
<div style = { css_test }> TEST </div>

 

---

❗ useState

useState를 사용하기 위해서는 useState 선언을 위해 import시키는 기본 셋팅이 필요하다

import React, { useState } from 'react';

 

바로 사용예제를 살펴보자,

useState를 사용하여 {중괄호}를 사용하면 원하는 곳에 Data-binding이 가능하다.

title 변수는 실제 저장 할 데이터가 들어있고, setTitle변수는 저장할 데이터를 변경시킬 함수가 들어있다.

let [title, setTitle] = useState('남자 코트 추천');
<h3> { title } </h3>

을 사용하면 <h3> 남자 코트 추천 </h3>으로 렌더링된다.

  function changeTitle(){
    setTitle("여자 코트 추천")
  }
  
  function App(){
  return (
    <div className="button">
      <button style={{marginBottom: "20px"}} onClick={changeTitle}>버튼</button>
    </div>
 )
 }

만약 <h3>태그 안에 있는 텍스트를 바꿔주고싶다면

setTitle을 바꾸는 명령을 수행하는 함수를 만든 뒤 기능을 사용하기 위한 버튼에 onClick 이벤트로 호출하면 된다.

 

** array나 object로 만들어진 useState 같은 경우는 ES6의 deep copy를 통해 원본을 훼손하지 않고 수정을 해야한다

  let [제목1, 제목1변경] = useState(['맛있는 우동', '맛없는 우동', '나쁘지않은 우동']);
  
  function seoulNoddles() {
    let copy = [...제목1]; // ES6 deep copy
    copy = ["맛있는 서울 우동", "맛없는 서울 우동", "나쁘지않은 서울 우동"];
    제목1변경(copy);
  }

copy라는 변수에 제목1에 해당하는 useState array를 deep copy후 

deep copy된 배열에 대해 값을 변경한 후에 set 변수(제목1변경)을 활용하여 데이터를 수정을 해야한다