[React] JSX 와 state

❓ JSX

JSX 는 JavaScript 를 확장한 문법이다.

쉽게 말하자면 자바스크립트에서 Html 과 유사한 문법을 사용할 수 있도록 만들어진 문법?

 

우리가 기존에 웹 사이트를 만들 때, Html, Css, JavScript 를 가지고 만들었다면

React 에서는 Html 대신 JSX, Css, JavaScript 를 가지고 만든다고 이해하면 쉽다.

 

---

❓ JSX 문법 (+ Html 과의 차이점)

1. class

html 에서 클래스를 부여할 때 class 를 사용했지만, JSX 에서는 className 을 사용한다.

<div class="container">기존 HTML</div>

<div className="container">JSX 문법</div>

 

 

2. style

JSX 에서는 style 을 정의할 때, {{ 속성명: "속성값" }} 와 같이 객체 형태로 작성한다.

그리고 CSS 속성명은 카멜케이스로 표현해야 한다.

예를 들어, font-size, background-color 처럼 대시기호를 못 쓰고, fontSize, backgroundColor 처럼 작성해야 한다.

<div style="color: blue; font-size: 24px;">기존 HTML</div>

<div style={{color: 'blue', fontSize: '24px'}}>JSX 문법</div>

 

 

3. 변수 넣기

JSX 에서는 변수를 중괄호로 감싸서 사용할 수 있다.

중괄호 안에는 유효한 모든 JavaScript 표현식을 넣을 수 있다.

const name = "짱구";

<div>{name}</div>

 

---

❓ state

근데, 리액트에서는 우리가 기존에 선언하던 형식의 변수를 사용하지 않고, state 라는 것을 사용한다.

state 는 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트의 상태를 나타낸다.

state 도 그렇고 변수도 그렇고 그냥 데이터를 저장해 놓고 사용하는 용도인데, 무슨 차이가 있어서 state 를 사용하는 걸까?

 

기존 변수를 사용하면 값이 변경되더라도 화면에 자동으로 업데이트가 되지 않지만,

state 는 이 상태값이 변경되면 해당 컴포넌트를 자동으로 렌더링 하여 변경된 값을 화면에 반영한다.

 

 

❗ 사용 방법

state 는 useState 훅을 사용하여 선언할 수 있으며, [상태값, 상태값을 변경하는 함수] = useState(초기값) 형태로 작성한다.

 

여기서 name 은 상태값, setName 은 name 의 값을 변경할 수 있는 함수를 의미하고, "짱구" 는 name 의 초기값이다.

setName 을 이용하여 값을 "맹구" 변경하면, 자동으로 화면을 다시 렌더링 한다.

즉, state 를 사용하면 화면을 새로고침할 필요 없이, 데이터가 변경될 때마다 화면이 자동으로 업데이트된다.

const [name, setName] = useState("짱구");

setName("맹구");

 

그래서 자주 변경될 데이터면 state 에 저장해서 쓰면 되고,

바뀌지 않을 데이터면 그냥 변수에 저장해서 쓰면 된다.

 

---

📝 정리

1. JSX 는 JavaScript 에서 HTML 을 작성할 수 있는 문법이다.

2. JSX 의 문법차이: class 대신 className, style 속성은 객체 형태로 작성, 변수를 중괄호로 감싸서 사용한다.

3. state 는 데이터 변경 시 자동으로 화면을 업데이트하는 React 의 상태 관리 방식이다.

 

---

💡 참고 문헌

https://ko.legacy.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React

https://ko.legacy.reactjs.org/docs/faq-state.html

컴포넌트 State – React