2주 동안 React를 사용하면서 느낀 점

개요

React를 배운 지 어느덧 2주 정도가 되었다.

Javascript를 이용해서 프로젝트를 만들었던 경험과 비교해서

React를 사용하면서 느낀 점을 글로 정리해보려고 한다.

 

왜 Javascript를 먼저 배우고 React를 배울까 싶었는데,

React의 편의성과 필요성을 느끼기 위해서 Javascript를 먼저 배운 게 아닐까 싶었다.

 

모든 글은 나의 주관적인 생각이니 그냥 읽고 넘어가길 바란다.

 

 

React와 Javascript의 차이점

1️⃣ HTML, CSS, Javascript를 하나의 파일 안에서 모두 작성할 수 있다

React와 Javascript의 차이점이 무엇이냐고 묻는다면,

가장 먼저 떠오르는 차이점이 하나 있다.

HTML, CSS, Javascript를 하나의 파일 안에서 모두 작성할 수 있다는 점이다.

 

Javascript만 이용할 때는

HTML 코드, CSS 코드, Javascript 코드를 왔다 갔다 하면서 작성했었다.

React에서는 그럴 필요가 없다.

하나의 파일 안에서 HTML 태그로 뼈대를 잡고, CSS로 디자인하고, Javascript로 요소들을 동적으로 만들 수 있다.

 

여기저기 파일을 옮겨 다니면서 코드를 작성하지 않아도 된다는 점이 크게 와닿는 장점인 것 같다.

여태까지 14인치 맥북을 사용하면서 코드를 작성했기 때문에 더더욱 큰 장점으로 느꼈다.

화면이 작다 보니 2개의 파일을 분리해서 놓으면 정신이 없어서 잘 사용하지 못했다.

 

2️⃣ Javascript에서 태그를 일일이 불러올 필요가 없다

1번과 일맥 상통한 이야기이다.

HTML과 Javascript를 하나의 파일에서 작성하다 보니

querySelector()같은 코드를 사용해서 HTML 태그를 가져올 필요가 없어졌다.

HTML 태그 바로 위에 함수를 작성한 뒤, 이벤트가 일어났을 때 함수가 실행되도록 코드를 짤 수 있다.

 

영화 검색 사이트를 제작할 때를 생각하면.... 너무나도 편리한 기능이다.

동적인 이벤트가 발생해야 되는 부분마다 querySelect()를 이용해서 태그를 하나하나 가져오고...

거기에서 발생할 함수 작성하고... 이것저것 할 일이 많았다.

React를 사용하면 아직까지 이벤트 위임을 한 적은 없었다.

Javascript를 사용할 때는 자식에서 발생한 이벤트를 부모에게 물려주는 이벤트 위임까지 생각하면서 코드를 짰어야 됐다.

React에서는 그런 걱정 없이 원하는 컴포넌트에서 이벤트가 잘 발생한다.

 

3️⃣ CSS-in-Javascript 방식

styled component를 이용하면 CSS 코드에서 props를 이용해서 동적으로 디자인을 쉽게 바꿀 수 있다.

props를 이용하면 이런 상황일 때는 버튼 색깔을 검은색으로 하고, 저런 상황일 때는 폰트 색깔을 빨간색으로 하는 방식의 코드를 쉽게 짤 수 있다.

Javascript를 사용할 때는 특정 상황일 때 일일이 태그를 불러와서 스타일을 바꿔줬어야 됐는데,

React에서는 그럴 필요가 없는 것이다.

 

결론

아직 사용한 지 2주 정도밖에 되지 않았지만 React의 장점을 크게 느끼고 있다.

React의 단점이 무엇이냐고 물어본다면.. 처음에 배울 때 문법이 어렵다는 점 빼고는 잘 모르겠다.

익숙하지 않아서 문법이 어려운 거지 2주 정도 계속 쓰다 보면 익숙해지지 않을 수가 없다.

 

무엇보다 HTML, CSS, Javascript의 개념을 탄탄하게 잡는 것이 중요한 것 같다.

검색할 때 React라는 키워드를 사용할 때도 있지만,

대부분 3가지의 키워드를 사용해서 검색하는 경우가 더 많았다.

HTML, CSS, Javascript을 제대로 알지 못하면 React도 제대로 사용할 수 없다.

 

너무 React의 장점만 늘어놓은 것 같다.

앞으로 사용하면서 React의 단점도 파헤쳐봐야겠다.