이제부터가 사실상 리액트의 본격적인 시작이라고 할 수 있을 것 같다.
리액트를 하면서 자주 사용하게될 JSX와 리액트의 핵심 요소인 컴포넌트에 대해 간단히 정리해보자.
🔭 JSX
JSX 는 React 에서 일반적으로 사용되는 많은 개발자에게 친숙한 구문을 사용하여 구성 요소 렌더링을 구조화하는 방법을 제공하는 JavaScript 언어 구문의 확장입니다
출처 : 위키백과
JSX는 함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 자바스크립트의 확장으로, 쉽게 말해 자바스크립트에 HTML을 추가한 확장 문법이라고 보면 된다.
const App = () => {
return (
<div>
<p>오늘 할거</p>
<h2>JSX</h2>
<div>Component</div>
</div>
);
}HTML과 비슷하게 생겼으나 자바스크립트이고 HTML과는 다른 JSX만의 특징이 있다.
JSX는 실행하면 Babel에 의해서 자바스크립트 코드로 Transpile 된다.
하나의 파일에 자바스크립트와 HTML을 동시에 작성하여 편리하고, 가독성이 좋다.
리액트 구성요소는 일반적으로 JSX를 사용하여 작성된다(물론 순수 js로 구성될 수도 있음).
📡 JSX 문법
자바스크립트 내에서 HTML을 쓸 수 있지만 HTML과는 다른 차이점이 있다.
HTML 태그 내에서 js 연산 가능
const App = () => {
const a = 3;
const b = 6;
return (
<div>
<p>{a} + {b} = {a+b}</p>
</div>
);
}변수 등 자바스크립트 표현식은 {} 를 써주고 그 안에 기입하면 된다.
태그의 class 속성 -> className
<div className="greeting">
안녕하세요~ <br />
ㅎㅇㅎㅇ
</div>HTML 코드였다면 <div class="greeting"> 인데 jsx에서는 class 속성은 className 이다.
태그의 인라인 스타일(style 속성)은 object로
<div className="greeting" style={{padding: 10, color: 'red'}}>
안녕하세요~ <br />
ㅎㅇㅎㅇ
</div>jsx에서의 style은 object다. css 속성명이 프로퍼티명, 그 속성의 값이 프로퍼티의 value인 js 객체라고 생각하면 된다.
이때 중괄호 두개인 이유는 객체도 자바스크립트 표현식이니 {}로 감싸야 하기 때문이다.
{padding: 10, color: 'red'} 라는 object를 {}로 감싼것.
닫는태그 필수
<div>
<input type="text" />
<br />
</div>input 태그나 br 태그 등 닫는 태그가 없어도 되는 태그여도 jsx에서는 무조건 닫아줘야한다.
직접 만들어서 사용하는 컴포넌트도 마찬가지!
반드시 유일한 최상위 element를 가져야함
const App = () => {
return (
<div>ㅎㅇㅎㅇ</div>
<div>ㅂㅇㅂㅇ</div>
)
}HTML 코드로 보면 전혀 문제없는 구조이지만 jsx에서는 최상위 요소가 반드시 하나여야 하기 때문에 이 코드를 실행하면 에러가 발생한다.
const App = () => {
return (
<>
<div>ㅎㅇㅎㅇ</div>
<div>ㅂㅇㅂㅇ</div>
<>
)
}이렇게 컴포넌트(App)에서 return 되는 HTML 구조가 무조건 하나의 요소로 감싸져야 한다는 얘기다. 그래서 보통 <div>로 묶거나 <> 로 묶는다.
<> 은 <React.Fragment>의 축약형 표기로 리액트의 Fragment를 말한다.
Fragment란 React v16에 추가된 기능으로, Fragment로 묶게 되면 실제 렌더링 시에는 Fragment 안의 내용만 출력된다.
실제 dom tree에 <> 은 추가되지 않고 Fragment의 자식들만 추가되는 것이기 때문에 <div> 와 달리 dom에 별도의 노드를 추가하지 않고 여러 자식을 그룹화 할 수 있게 된다.
💎 컴포넌트
컴포넌트란 리액트에서 UI를 구성하는 기본 단위로, 리액트에서 앱을 구성하는 최소 단위라고 볼 수 있다.
컴포넌트로 UI가 구성되기 때문에 UI를 각 부분을 재사용 가능하고 독립적으로 생각할 수 있다.
개념상 컴포넌트는 자바스크립트 함수와 비슷합니다. 임의의 입력 (“props”라고 부르는)을 받아들이고 어떤 게 화면에 나타나야 하는 지를 설명하는 React 요소를 반환합니다.
출처 : React 공식문서
컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트가 있다.
기존의 리액트는 모두 클래스형 컴포넌트였는데 v16에서 함수형 컴포넌트와 훅(Hook)이라는 개념이 등장하였고 현재는 함수형 컴포넌트가 주로 사용된다.
함수형 컴포넌트
function Greeting() {
return (
<div>Hello!</div>
);
}자바스크립트의 함수처럼 표현하고자 하는 HTML 구조를 return 으로 반환해주면 된다.
그러면 <Greeting /> 이라는 태그를 사용할 수가 있게 되고 이것이 컴포넌트이다.
(닫는 태그 필수!)
또한 자바스크립트의 함수처럼 arrow function 형태로도 물론 가능하다.
const Greeting = () => <div>Hello!</div>;클래스형 컴포넌트
class Greeting extends React.Component {
render() {
return <div>Hello!</div>;
}
}위의 함수형 Greeting 컴포넌트를 클래스형 컴포넌트로 표현한 코드이다.
클래스형 컴포넌트는 React의 Component라는 클래스를 상속받아 구현되고 render 메서드가 반드시 있어야한다.
render 메서드 내부에 표현하고자 하는 HTML 구조는 return 으로 반환해주면 된다.
🤔 함수형 컴포넌트 vs 클래스형 컴포넌트
앞서 말했듯이 요즘은 함수형 컴포넌트가 주로 사용되어서 중요한건 함수형 컴포넌트라고 봐도 무방하다. 여기서는 두 컴포넌트 모두 아주 간단히만 살펴봤는데, 나도 앞으로 함수형 컴포넌트 위주로 공부할 예정이다.
하지만 클래스형 컴포넌트도 알긴 알아야함..!
클래스형 컴포넌트가 함수형 컴포넌트보다 몇가지 기능을 더 가지고있고, 생명주기를 파악하기 쉽다. 그리고 Java를 하던 사람들에게 익숙한 Class 형태이기 때문에 누군가에게는, 어떤 경우에는 클래스형 컴포넌트를 사용해야 하는 일도 있을 것 같다.
그리고 예전에는 모두 클래스형 컴포넌트였기 때문에 만약 우리가 꽤 예전의 리액트 코드를 보거나 손봐야 할 일이 있을 때 클래스형 컴포넌트를 아예 모른다면 낭패다.
아무튼 그래서 클래스형 컴포넌트를 알긴 알되 당장은 깊게 들어가진 말고 일단은 함수형 컴포넌트 위주로 학습을 진행해봐야겠다 🐣
참고자료
https://life-with-coding.tistory.com/508#google_vignette
https://reactjs-kr.firebaseapp.com/docs/components-and-props.html
