#01.TIL | React(배우는 이유, JSX, State)

Seongjae Hwang·2021년 10월 24일
0

시작

9월 중순에 HTML,CSS 학습을 시작했고 현재 Vanilla JavaScript학습과 동시에 JavaScript기반 프레임워크인 React를 기초수준까지는 알고 있어야 될것 같아 공부하기 시작했다. 물론, 지금 실력은 객관적으로 (굉장히)형편 없지만 조급해하지 않고 매일 꾸준하게 정진해야겠다.

React를 배우는 이유

React는 왜 배워야 되는것일까. 여러 자료들과 유튜브를 통해 어떤 이점이 있는지 알아보았다. 현재 많은 서비스에서 사용중이며, 새로고침되지 않고 부드럽게 작동하는 모바일앱과 비슷한 "웹 앱"을 구현할 수 있다는 것이다.
그러면 이는 소비자에게 하여금 편안한 UI/UX를 제공해줄 수 있고, 최종적으로 기업에서 제일 중요한 "구매전환율"이 높아진다는 것이다. 이 설명을 듣는 즉시, 나는 바로 납득하게 되었다.
내가 소비자로써의 경험을 뒤돌아 보더라도 아무리 좋은 프로덕트가 있더라도 사용하기 불편하고, 버벅이고, 느린 모바일 웹이 있다면 신뢰도가 하락하고 실제 구매까지 이루어지지 않은 경험이 있기 때문이다.
또한, React라는 라이브러리를 쓰면 쉽게 짧고 간결한 코드를 작성할 수 있으므로, 안배울 이유가 없다.

JSX

JSX는 JavaScript eXtension의 줄임말로 HTML과 비슷해 보이지만 다르다. 따라서, JSX도 일종의 JavaScript이기 때문에 class를 사용하지 않고 className을 사용한다. HTML과 비슷한데 JSX는 어떤 점이 좋을까.
우선, 오늘 배운 내용중 흥미로웠던 것은 바로 "데이터바인딩"을 할 수 있다는 것이다.
예를 들어

function App() {
  let posts = '~~~~~~~~';
  return (
    <div className="App">
      <div className="nav-bar">SeongJae Blog</div>
      <h4>{ posts }</h4>
    </div>
  );
}

h4 태그안에 블로그의 글을 넣고 싶다고 하면,
JavaScript로 document.getElementById().innerText = "~~" 이런식으로 작성했겠지만 중괄호를 사용하여 변수, HTML속성, 심지어 동적인 함수도 데이터바인딩 할 수 있다는 것이다. 이는 순수 JavaScript를 사용한 코드보다 작성하기도 쉽고 가독성 면에도 좋다는 생각이 들었다.

State

사이트에 필요한 데이터들을 보관하여 데이터바인딩할때 아까 배웠던것과 같이 변수로 지정해서 넣는 방법도 있지만, State라는 방법도 있다는것을 알게 되었다.

let [a,b] = useState('햄버거 맛집');

위처럼 a와 b라는 변수가 생기게 되는데, 이는 각각 '햄버거 맛집'이라는 데이터가 들어있는 State와 '햄버거 맛집'이라는 데이터 변경을 도와주는 함수가 들어 있게 된다는 것이다. 이는 아까 변수와 똑같이 데이터바인딩이 가능하고, State 안에는 String, Array, Object자료형 등이 들어갈 수 있다.
그러면 State가 변수와 다르게 어떻게 활용할 수 있을까. State는 수정이 일어날때 자동으로 관련된 HTML이 재랜더링된다. 즉, 새로고침되지 않는다는 것이다.
(예를 들어 좋아요 버튼을 누르는데 페이지가 새로고침하며 좋아요수가 집계된다면,,)
이를 활용하면 부드러운 웹앱을 구성할 수 있게 된다. 그래서 앞으로 데이터 변경이 자주 일어날 수 있는 부분들은 변수로 지정하기 보다는 State로 지정해야겠다고 생각하게 되었다.

profile
Always Awake

0개의 댓글