[React] JSX, State 간단 정리

JSX

JSX는 리액트에서 사용하는 문법으로, 자바스크립트에서 HTML 언어를 사용할 수 있도록 만들어졌다. 

 

const element = <h1>Hello, world!</h1>;

 

위와 같이 h1 태그에 들어있는 Hello world를 변수로 선언하여 코드를 작성하는 것이 가능하다.

JSX를 사용하면 서버로부터 가져온 데이터들을 바인딩하기가 상당히 쉬워지는 장점을 가지게 된다. 서버와 통신하기 위해서는 axios와 같은 라이브러리가 필요하긴 하지만 일단 여기서는 패스

 

 

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!  </h1>
);

 

데이터 바인딩이라 함은, 화면단에 서버로부터 가져온 데이터를 사용자에게 출력하여 보여주기위해서 HTML 태그에 데이터를 넣어주는 것을 뜻하는데, Javascript의 모든 기능을 온전히 사용이 가능한 JSX는 위와 같은 코드 작성이 가능해진다. 단, HTML 태그 안에 변수를 넣어 데이터 바인딩을 하기 위해서는 {} 중괄호를 사용하여 넣어주어야 한다.

 

 

 

JSX를 사용할 때 몇 가지 주의사항이 있다. 자바스크립트와 HTML에서 충돌하는 키워드가 몇 가지 있기 때문에 이를 알고 사용하여야 한다.

 

1. HTML에서 사용하는 class는 className으로 사용하여야 한다.

2. 1에서 보다시피 camelCase 프로퍼티 명명 규칙을 사용한다.

3. 태그가 비어있을 경우 />으로 닫아주어야 한다.

 

 

JSX는 후에 컴포넌트를 사용할 때 본격적으로 다룰 예정이다. 일단 JSX가 어떤건지 더 깊이 알기 위해서는 공식문서를 살펴보는 것을 추천한다.

 

 

 

 

 

State를 사용하여 데이터 바인딩하기

위에서 잠깐 살펴보았지만 데이터를 바인딩하는 방법은 변수에 저장하여 {}중괄호를 사용하여 바인딩하기, 그리고 State를 사용하여 데이터를 바인딩하는 두 가지로 구분할 수 있다.

 

State는 React에서 제공하는 기능으로, 데이터를 State에 저장한 다음, 데이터가 바뀌었을 경우 해당 컴포넌트만 새로고침없이 재렌더링하여 실시간으로 홈페이지가 갱신되도록 할 수 있는 중요한 기능이다. State는 자주 바뀌는 데이터가 있을 경우에 사용해주는 것이 좋다.

 

 

State를 사용하기 위해서는 먼저 import를 해야한다. 

import { useState } from "react";

구조분해할당을 사용하여 useState를 import 하였다. 구조분해할당을 사용할 경우 여러 함수들을 한 줄에 import하는 것이 가능하여 효율적인 코드 작성이 가능해진다.

 

 

아무튼, useState 함수를 이제 사용해보자, 사용할 때는 다음과 같은 변수선언을 통해 사용한다.

let [a, b] = useState('데이터');

코드가 잘 이해 되지 않을 수 있는데, useState는 두 개의 값을 리턴한다. 하나는 useState 함수에 입력한 파라미터 안에 있는 데이터 값, 하나는 입력한 데이터값을 변경할 수 있는 변경함수이다. 따라서 a는 '데이터'가 되고, b에는 a를 변경하는 함수가 저장되게 된다.

정리하면 State로 지정한 데이터를 사용할 때는 a를 사용하면 되고, a를 수정하기위해서는 b(함수)를 사용하여 수정하여야한다.

 

 

State 데이터를 변경할 때는 변경함수를 사용하여 수정하여야 한다. 변경 함수를 사용해야 해당 state를 사용할 때 재렌더링이 일어나기 때문이다.

State에 들어가는 데이터가 단일자료형이라면 상관없지만, 배열이나 Object가 들어갈 경우에는 deep copy를 한 다음 데이터를 수정해 주는 것이 좋다. 예시코드를 보자.

let [arr, arrModify] = useState([1, 2, 3]);
arrModify(() => {
    let copyArr = [...arr];
    copyArr.push(4);
    return copyArr;
});

1, 2, 3이 배열로 되어있는 데이터가 State에 들어가 있다. 이 때 State의 값을 변경하기 위해서 copyArr이라는 변수를 선언하고 arr에 있는 데이터를 그대로 복사하여 할당하였다. 이는 arr에 있는 값을 직접적으로 수정하지 않기위해서이다. arr변수를 직접 수정하게되면 재렌더링이 일어나지 않게 되고, State를 쓰는 의미가 없어지게되기 때문이다.