React에선 JSX, 데이터 바인딩을 하고 싶을 땐?

저번시간에는 리액트에 대한 간단한 셋팅과 리액트를 쓰면 좋은 점들에 대해서 알아보았고,

이번 시간에는 리액트에서 데이터바인딩을 하는 법과 navbar를 만드는 법,

변수를 선언할 때 state로 데이터를 저장하는 방법에 대해서 알아보겠습니다.

 

---

 

그리고 혹시 보고 계신 분들 중에 🎲보드게임🎲이나 프로젝트📂에 관심있으신 분들 계신가요?

사이드프로젝트팀과 보드게임 중고거래 플랫폼을 진행하고 있는데, 

기획부터 개발과정까지 오픈, IT관련 정보를 공유하자는 목적으로 팀과 함께

네이버 블로깅도 운영하고 있습니다.

 

관심있으신 분들이 있으시다면 살짝쿵 방문해주시면 감사하겠습니다. 

https://blog.naver.com/boardgetddo_team

보드살롱 : 네이버 블로그

 

---

이 프로젝트에서 프론트단을 맡고 있고 리액트로 작업할 예정이예요.

그래서 힘 뽝!주고 리액트 돌입✨

 

 

계속해서, 

자바스크립트와 제이쿼리를 사용했을 때에는 style을 주고 싶을 때나 태그에 해당되는 내용들을 사용하려할 때 class를 넣어사용했지만, 리액트에서는 <div className="클래스명"> 을 사용한합니다.

 

저번시간에 말한 APP.js에 입력하고 있는 것이 HTML에 쓱쓱척척 작성하고 있는 것같지만

HTML가 아닌 JSX라는 문법.

​

자바스크립트 파일 안에서 HTML를 직관적으로 작성하기 위해 도와주는 리액트 기본 내장문법이라고 볼 수 있다. JSX도 일종의 자바스크립트이기 때문에 자바스크립트에서 사용하는 예약어인 class를 사용하면 안된다. className이라고 해야 css파일에 class명을 넣을 수 있다는 것!

 

1. ClassName을 사용해 navbar 만들어보기

 

                    - APP.js

ClassName로 이름을 짓고 css파일에 원하는 스타일들 작성하기

 

                                   - APP.css

 

터미널에 npm start를 찍고 브라우저를 열어보면    ClassName을 통해 navbar가 만들어진 걸 볼 수 있다.

 

 

2. JSX에서 데이터 바인딩하기

 

데이터바인딩이란?

자바스크립트 데이터를 HTML에 넣는 작업을 말하는 것.

​

데이터바인딩하는 순서

1. 데이터바인딩할 곳 위치 설정

2. data라는 변수 만들기

3. 데이터바인딩하고 싶은 곳에 변수명을 담고 중괄호하기

​

                - APP.js

데이터바인딩하고 싶은 곳에 선언한 변수명과 중괄호를 넣어주기!&nbsp;

 

데이터바인딩을 한 후 화면의 모습

 

또한 자바스크립트나 제이쿼리를 사용할 때 HTML에 스타일을 넣고 싶다면

style="color : red"이런식으로 사용했었다. 하지만 JSX에는 { } 로 감싸서 넣어야한다는 것!

​

그리고 리액트에서는 데이터를 저장할 때 let , var, const 뿐아니라 state()를 사용한다.

리액트를 사용할 땐 중요한 데이터들이나 자주 변경될 수 있는 것들은 State를 사용하는 것이 더 간편하다.

​

State에 데이터 저장하는 방법

1. let 변수명 = '아무거나'; / useState() 함수 추가

2. import { useState } from 'react'; 가 자동추가

3. useState()함수는 state를 하나만들어주는 함수,

useState(저장데이터)를 사용한다면 state 안에 데이터를저장할 수 있다.

​

데이터를 보관할 때 방법 2개가 있는데 1. 변수를 만들고 넣는 방법 2. state를 만들고 넣는 방법 이 있다.

​

1. 변수를 만들고 넣는 방법

let miniTitle = '대표 카테고리 이름'; 이렇게 만들고

데이터바인딩할 곳 위치에 중괄호를 열고 그 안에 변수명을 넣으면 된다.

​

2. state의 방법은

let [x, y] = useState('루미큐브');

[10, 100]을 각각 변수에 담고싶다면

var [x , y] = [10, 100]; 이 뜻은 → 10와 100을 x와 y변수에 담아라.

array, object에 있던 자료를 변수에 쉽게 담고 싶을 때 위 처럼만들면 x는 10, y는 100 이되는 것이다.

let [아범, 아범글변경] = useState('할리갈리');

재실행 화면

즉 변수 대신 쓰는 데이터 저장공간 state.

그럼 또 '아범게임변경' 변수를 데이터바인딩하고싶다면?

배열의 형식으로 저장했으니 똑같이 맞춰야겠다.

let [아범, 아범게임변경] = useState(['루미큐브', '할리갈리']);

자, 이렇게 다시 쓰고 재시작을한다면

두 데이터가 다 나온다, 나는 하나, 할리갈리의 데이터를 보고싶은데. 어떻게 내보내야할까?

배열을 이용해 데이터를 저장했다? 루미큐브를 보고싶다면 아범[0],

할리갈리를 보고싶다면 아범[1] 로 바꿔야한다.

​

여기서 궁금한 점은, 왜 useState를 사용하는 걸까?

글내용들이 바뀔 때 HTML이 자동으로, 바로바로 재랜더링이 되어지기 때문이다.

그냥 변수들을 사용하면 자동으로 재렌더링이 안된다는 것(번거롭게 계속 새로고침 F5를 써야 나온다.)

​

​

🍖 이렇게 JSX문법을 쓰는 리액트에서는 class가 아닌 ClassName을 사용해야한다는 것,

데이터 바인딩할 때 중괄호 { } 를 해야한다는 기존 js와 는 다른 점, state를 사용하여 변수안의 데이터를 변경하는 방법들을 알아보았다.

​

리액트를 web app처럼 만들고 싶을 때는 state에 보관해야한는 것! 잊지말기를..★

그럼 다음 시간에는 버튼만들기와 좋아요 수 증가시키는 방법에 대해서 공부하도록 할 예정입니다. 안녕🚀

​