✨ 몇 달 전에 리액트를 공부하고 웹사이트도 만들었는데 갑자기 이런 글을 쓰는 이유는?
리액트를 써 본 적 없는 분에게 리액트가 뭔지, 왜 JSX라는 걸 써서 html처럼 보이는 코드를 자바스크립트 코드와 같이 쓰는지 설명하다가, 내가 리액트를 왜 쓰는지 모른다는 걸 깨달았다.
어떻게 쓰는지만 배웠지, 왜 쓰는지는 제대로 생각해 본 적이 없었다.
그래서 리액트가 왜 나왔는지, 왜 좋은지 생각해 보고 싶어서 포스팅을 하게 되었다.
리액트란?
리액트는 프레임워크가 아니다. 오픈 소스 JavaScript 라이브러리다.
🤔 이게 대체 무슨 말일까?
기존에 진행하던 프로젝트가 어떤 기술을 사용하든 간에 기존 코드를 다시 쓰지 않고도 리액트로 새 기능을 개발할 수 있다는 의미다(아마도..). https://reactjs.org/ 에 아래와 같이 소개되어 있다.
Learn Once, Write Anywhere
We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code.
JSX: JavaScript + XML
🤔 'JSX가 대체 뭐예요?'
라고 누가 물어 본다면 내가 이해한 나름의 방식대로 이렇게 대답하고 싶다.
JSX는 바닐라 JavaScript로 명령형으로 일일이 코드를 적어 주는 대신 원하는 결과를 html처럼 보이는 코드로 선언형으로 적을 수 있는 문법이다.
JSX를 사용한 경우 vs 사용하지 않은 경우
💫 JSX 문법
'난 site-heading이라는 클래스를 갖고 내용은 Hello, React인 h1 태그를 만들고 싶어' 라고만 선언하면 된다.
const heading = <h1 className="site-heading">Hello, React</h1>💫 JSX 없이 바닐라 JavaScript로 표현했을 때
컴퓨터가 이해할 수 있게 하나 하나 명령형으로 코드를 입력해야 한다.
const heading = React.createElement('h1', {className: 'site-heading'}, 'Hello, React!')JSX는 HTML처럼 생겼지만 실은 JavaScript와 더 비슷하다
- CSS 클래스를 추가할 때 class 대신 className 사용한다. class는 자바스크립트 예약어이기 때문에.
- 프로퍼티와 메소드는 카멜 케이스 표기법으로 작성해야 한다(ex)onclick이 아닌 onClick).
- self-closing 태그는 아래와 같이 슬래시(/)로 끝나야 한다
<img />- 변수, 함수, 프로퍼티 같은 자바스크립트 표현식을 JSX 안에서 사용할 수 있다.
const name = 'Tania'
const heading = <h1>Hello, {name}</h1>(번외) 리액트와 루비의 공통점..?
(나 혼자 생각해 본 공통점)
리액트를 오랜만에 다시 하려고 강의를 듣다가 '리액트는 composable 합니다' 라는 얘기를 듣고 문득 이런 생각이 들었다.
리액트 컴포넌트도 루비에서 쓰는 erd.html partial이랑 비슷한 거 아닌가?
index 뷰 파일의 일부를(ex)헤더, 푸터, 보험 약관, 채널톡) 다른 파일로 분리한 다음 render로 불러와서 쓰는 거랑 비슷한 게 아닐까 어쩌면...?
검색해 보니 좀 다른 것 같다:
리액트가 컴포넌트를 사용하는 건 분해해서 여기저기 사용할 수 있다는 장점 때문만은 아니고 또 다른 이유(장점)가 있다고 한다. 자세한 건 나중에 알게 되면 추가하겠음...!
