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

을 사용한합니다.

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

HTML가 아닌 JSX라는 문법.

​

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

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

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

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

데이터바인딩이란?

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

데이터바인딩하는 순서

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

2. data라는 변수 만들기

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

또한 자바스크립트나 제이쿼리를 사용할 때 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에 보관해야한는 것! 잊지말기를..★

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