vanilaJS와 reactJS의 차이 및 JSX

react를 왜 배워야하는지 어떨 때 써야하는지에 대해서 모른다면 사용법을 무작정 외우는 수 밖에 없다.

이번에 간단하게 어떤 차이가 있는지 알아보고 가겠다.

 

react element를 직접 만들어 보는 방식으로 원리를 이해하고, 어려운 방식으로 먼저해봐야 나중에 쉬운 방식으로 했을 때 편한지를 알 수 있었다.

 

먼저 비슷한 기능을 만들어보려고한다 VanilaJS

먼저 버튼을 클릭하면 화면의 숫자가 하나씩 증가하는 것을 나타내려고 하였다.

 

데이터가 바뀌어도 html은 새로고침이 되지 않는다. 따라서 화면에 그 숫자가 자동으로 반영되지 않는다.
이를 해결하기 위해서 eventlistener에 들어가는 함수에 그 표시하는 값을 바꿔주는 식을 적어주어야함.
그리고 많은 양의 코드가 필요 ( eventlistener를 달아주거나...)

 

비슷한 기능을 reactJS로만들어 보았다.

reactJS와 react-dom을 import하므로써 script에서 사용할 수 있었다. 

react js는 element를 생성하고 event listner를 더하는 것등을 도와주고,
react-dom는 react element를 가져다가 html로 바꾸기 위하여 사용한다.

 

이건 버튼을 누르면 콘솔창에 뜨도록 하는 것을 만들어 주었다. 3개의 인자에 각각 태그,props,content가 들어간다.

container는 이를 묶어주기 위해 content안에 배열에 집어 넣어주었다.

react element에 event listener를 직접달 수 있다. 이 점이 편한 점 중 하나이다.

props에 event는 html에 나타나지 않도록 알아서 처리를 해준다. 다른 props( id, class )등은 html에 잘 나타난다.

 

물론 변수를 만들고 화면에 자동변환하는기능은 아직 만들지 않았다. (아마 state를 사용해서 인듯하다.)

단지 어떤 차이점이 있고, 어떤 편리한 점이 있는지를 알아볼 수 있는 시간이었다.

 

vanila는 기존 html을 가져와서 javascript로 작업하였던 반면

reactJS는 모든것이 javascript로부터 시작하고 그게 html이 되는 구조인 것 같다. 그리고 interactive하게 작동이 되기에 vanilaJS의 단점을 커버해주는 것 같다.

 

위의 createEelement방식은 쓰이지않는 방식이며, createElement를 좀더 쉬운 방법으로 대체해보려고한다.

그게 바로 JSX !이다. react에서는 절대 빼놓을 수 없는 존재이다.

 

기본적으로 React 요소를 만들 수 있게 해주는데

HTML에서 사용한 문법과 흡사한 문법을 사용해서 만든다.

위에 주석처리 된 h3과 아래 h3은 완전히 같은 것이고 JSX로 만든 것일 뿐이다.

하지만 이렇게만 해주고 실행시키면 오류가난다. 브라우저가 JSX를 온전히 이해하지 못하기 때문이다.

따라서 babel을 이용하여 위의 주석 처리 된 코드로 변경을 시켜주어야 브라우저가 온전히 이해를 할 수가 있다.

따라서 babel 변환기를 import하여 바꿔주려고 한다! type='text/babel'을 적어주어야 오류가 나지 않는다.

header에 babel이 잘 변환 시켜놓은 것을 확인할 수 있다.

이번엔 container안에도 createElement가아닌 JSX방식으로 해보려고하는데 여기서는 조금 다르다.

이렇게 변수명을 적어주면 단순히 text만 출력이 된다. 따라서 아래와 같이 적어주면 잘 나온다.

근데 위와 같이 적으면 변수를 설정해 준 이유가 없지않나?

따라서 우리는 저 JSX를 return해주는 함수를 만들고 div안에서 호출해주면 된다.

그럼 h3() btn()이렇게 해줘야하나? 아니다. 여기에도 규칙이 있다.

각 컴포넌트들은 대문자로 시작해야한다. 

그렇지 않으면 JSX가 일반 태그로 인식하기 때문이다.

일반 html형식처럼 <H3/>이런식으로 표현주어야한다.

자 그럼 ReactDOM.render에도 container를 함수로 만들어 바꿔주겠다.

create-react-app을 설치하고 index.js를 읽으면 위와 같은 형태이다. 처음에 왜 저런 형태인지 몰랐지만

하나하나 차근차근 진행과정을 살펴보니 이제는 왜 이러한 형태인지 이해할 수 있게되었다.