[React] React와 JSX

2022년 12월 21일 작성

HTML, CSS, Javascript 로 만들었던 위스타그램을 리액트로 바꾸는 작업을 하고 있다. 메인을 컴포넌트로 나누니 컴포넌트당 코드가 짧아서 확실히 보기가 편하다. 아직 Vue.js와 앵귤러를 써본 적은 없지만 왜 리액트가 인기가 많은지 이해가 간다. 학습이 다 끝나면 각잡고 리액트로 사이트를 만들면서 SCSS 도 잘 활용해보고 싶다. 내 맘에 쏙 드는 리액트에 대해 알아보자!!

React

리액트는 사용자의 인터페이스(UI)를 만들기 위한 자바스크립트의 라이브러리다. 자바스크립트의 라이브러리이기 때문에 자바스크립트의 문법을 그대로 활용한다. 그러니 리액트를 잘 알려면 자바스크립트 공부도 필히 해야 한다.

리액트의 특징

1. 선언적 프로그래밍

선언적 프로그래밍은 '어떻게' 보다는 '무엇' 에 집중하는 방식이다. 예를 들어 화면을 렌더링한다면, 선언적 프로그래밍에서는 화면을 렌더링하는 과정이 중요한 것이 아니라 어떤 화면을 렌더링할 것인지가 중요하다. 우리는 하고자하는 목표(ex. 메인페이지에 Nav, Feeds, MainRight 화면을 보이게 하는 것) 에 집중하면 되고, 렌더링을 위해 어떤 과정이 필요한지에 대해서는 리액트가 알아서 처리해주니 신경쓰지 않아도 된다.

2. Virtual DOM 을 통한 리렌더링

화면에 변화가 생길 때마다 리렌더링을 하면 어떨까? 사이트가 복잡한 구조를 가질수록 성능이 낮아질 것이다. 그래서 리액트에서는 이전에 그렸던 화면과 비교해 화면이 달라진 부분만 다시 리렌더링을 해주는 효율적인 방법을 사용한다.

이를 위해 필요한 것이 가상 DOM 이다. 리액트는 화면에 변화가 생길 때마다 가상 DOM 에 적용시키고, 변경사항들을 한 번에 실제 DOM 에 전달해 렌더링이 딱 한 번만 실행되도록 해준다.

2. 컴포넌트를 이용한 화면 구성

컴포넌트란 재활용이 가능한 UI의 구성 단위이다.

이렇게 검색 영역, Nav 영역, 로그인 영역, 기사 영역 등을 각각 하나의 컴포넌트로 만들고, 나중에 페이지를 만들 때 필요한 컴포넌트를 넣어 활용할 수 있다. 컴포넌트를 이용하면 페이지를 구성하는 시간을 단축시킬 수 있다. 컴포넌트를 열심히 만들어두면 필요한 컴포넌트를 조립해서 사이트를 매우 빠르게 만들 날이 오지 않을까 싶다!! x_x

JSX

리액트에서는 JSX(JavaScript XML) 문법을 사용한다.
const element = <h1>Hello, Songaji</h1> 라는 코드를 보면,
const 는 자바스크립트에서 변수를 선언할 때 쓰는거고 h1은 HTML의 태그라는 것을 알 수 있다.

이게 무슨 혼종인가 싶겠지만 JSX 는 자바스크립트와 HTML 을 모두 사용할 수 있는 자바스크립트의 확장 문법이다.

JSX 사용 시 주의할 점

1. class가 아닌 className 사용하기

리액트에서는 태그에 class를 부여하고 싶을 때 class 가 아닌 className 을 써야 한다. 수업에선 따로 이유가 언급되지 않아 궁금해 찾아보니 자바스크립트에서 class 가 예약어이기 때문이라고 한다.

예약어는 이미 프로그래밍 언어에서 문법적인 용도로 사용되고 있어 식별자로 사용할 수 없는 단어를 말한다. class 는 객체 지향 프로그래밍에서 객체를 생성하는 템플릿으로 쓰이고 있어서 HTML 과 달리 자바스크립트에선 class 를 쓸 수 없다.

2.  카멜 케이스 컨벤션 사용하기

JSX 는 자바스크립트와 같이 카멜케이스를 사용한다. 그래서 className, onClick 과 같은 형태로 변수 이름과 속성, 이벤트 등을 입력하면 된다.

3.  부모 태그로 JSX 요소를 감싸주기

1. <div> 또는 <Fragment> 또는 <> <h1> 캥거루처럼 JSX 는 안에 있어야 해요 </h1> </div> 또는 </Fragment> 또는 </>

<div> 태그를 사용할 수 있지만 그보다는 리액트에 있는 <Fragment> 또는 Fragment의 단축문법인 빈 태그를 이용하자. <div> 태그를 사용하면 HTML 의 DOM 구조가 div - h1 으로 구성되지만, Fragment 를 사용하면 h1 으로만 구성이 된다.

4. 태그는 꼭 닫아주기

• img 와 같이 닫는 태그가 필요하지 않았던 것들도 이제는 <img 블라블라 /> 이렇게 꼭 닫아줘야 한다.

리액트로 바꾸던 중 알게 된 새로운 지식!!

로그인 화면에서 id input에 onChange 이벤트가 발생할 때마다 idValue 가 바뀌도록 useState 를 사용했다. 그런데 idValue가 한 박자 늦게 업데이트가 됐다. onChange 이벤트는 변화가 있을 때마다 감지하는 것인데 대체 뭐가 문제일까 고민하다가 onKeyUp 이벤트로도 바꿔보았지만 결과는 똑같았다. 그래서 멘토님께 질문을 했다.

알고 보니 setUserID 함수가 실행이 다 완료된 후에 idValue가 event.target.value 값으로 업데이트되기 때문에 idValue의 변화가 한 박자 늦게 이뤄진다.

1. 숫자 1을 눌렀다.
2. event.target.value = 1이 된다.
3. setIdValue 로 idValue 값이 1로 바뀔 줄 알았지만 여전히 idValue는 0이다. 그래서 console.log(idValue) = 0이다.
4. 함수가 끝나고서야 idValue가 1로 업데이트된다.

console.log(idValue)를 함수 밖에 위치시키니 내가 생각한대로 값이 출력되었다!! 함수가 끝나고나서 값이 업데이트된다는 것을 잊지 말자~!!