리액트 입문 1일 차 @컴포넌트, jsx

오늘은 드디어 js 공부를 간단하게나마 마무리짓고 리액트 입문을 하게 되었다. 

 

리액트는 내가 이번에 참가한 부트캠프의 핵심 학습내용인데, 프론트엔드 개발의 필수기술이라고 한다. 지금까지 배운 js는 언어이고, 리액트가 기술에 영역에 있다고 하는데 아마 js를 다루는 것은 한글을 쓸 줄 안다는 것이고 리액트를 다루는 것은 기자나 작가 등의 직업적 기술이라고 보면 될 것이다. 즉 직업을 가지려면 리액트를 쓸 줄 알아야 한다는 것이다. 

 

리액트 입문으로 지급받은 강의는 총 2주차로, 개인과제도 있고하니 오늘 하루를 모두 써서 강의를 완주하려고 했는데, 생각보다 기억할 것이 많은데다가 대충보고 다시 보는 것보다는 찬찬히 살피고 다시 강의 볼 필요가 없도록 하는 게 낫다고 생각해서 오늘은 리액트로 아주 간단하게 페이지를 작성하는 법까지만 배웠다. 

 

먼저 리액트 프로젝트를 생성하고 느낀 것은 이제 정말 어려워졌다는 것이었다. 지금까지 사용했던 바닐라 자바스크립트와 잠깐 쓰고 말았던 j쿼리는 말 그대로 문서를 작성하는 느낌으로, 그냥 폴더와 파일을 생성해서 글 쓰듯이 쓰면 그에 따라 페이지가 만들어지는 것이었다. 하지만 리액트 프로젝트는 git bash와 npm을 통해 다운 받은 yarn을 활용하여 터미널에서 명령어를 사용해서 프로젝트 하나를 생성하고 페이지를 작성할 수 있었다. 처음부터 하나씩 차근차근 스스로 파일을 만들고 배치하던 지금까지와는 많이 달랐다. 

 

다만 다행인 점은 리액트에서 사용하는 jsx파일 형식은 js파일의 확장판으로서 js에서 사용하던 문법들을 사용하기 때문에 다루기 크게 어렵지 않았다는 것이다. 물론 컴포넌트의 형식(하나의 컴포넌트는 하나의 큰 태그만을 가진다)이나 class명 규칙(className), 인라인 style 규칙(중괄호를 2개 써야함=자바스크립트1개+객체1개) 등 기존에 사용하던 js문법 다른 부분들이 있었지만, 달리 말하면 이런 것들 말고는 전체적인 문법들은 같아서 편하게 사용할 수 있었다. 

 

본론으로 들어와서 내가 파악한 바로는

jsx>컴포넌트

로 정리할 수 있을 것 같다. 이 두 가지가 완전한 상하관계를 가지고 있는 것은 아니지만 일단 정리하자면 이러한 관계를 가지고 있다. 왜냐하면 컴포넌트는 리액트 엘리먼트를 반환하는 ui조각이고 jsx는 컴포넌트가 반환한 리액트 엘리먼트를 읽어내고 활용할 수 있는 문법이기 때문이다. 좀 더 단순하게 말하자면 'jsx 파일이 컴포넌트를 가진다'라고 보면 될 것 같다. 

 

아직까지는 정말 기초 중의 기초까지만 배웠기 때문에 더 복잡하고 실제적인 코딩에서 이것들이 어떤 양상을 가지게 될지는 모르겠지만 아마 큰 틀은 다르지 않을 것 같고, jsx파일과 그 안의 컴포넌트를 어떻게 구성하고 어떻게 실제 페이지에서 동작할 수 있도록 연결할 지가 과제가 될 것 같다. 

 

아래는 내가 오늘 배운 단순한 형태의 컴포넌트이다.

function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

jsx 파일은 이렇게 js+html의 형식을 가진 컴포넌트를 읽어낼 수 있는 파일 형식이기 때문에 js+x의 이름을 가졌다고 한다.