전 React를 다룬지 몇개월 안된 "아기"이지만, React를 다루어 보면서 느꼈던게 JSX를 이용하면서 HTML에 "변수"의 개념을 도입할 수 있었다는게 정말 편리했던것 같습니다. 이거 덕분에, 사실 생산성도 잘 챙길 수 있었던것 같습니다.
오늘은, 그 편리함에 대해서 더 와닿게 기록을 해보겠습니다.
React에서는 JS를 쓸 수 있다
저는 React를 React Hook으로 먼저 배웠지만, Stack overflow 같은곳만 가도, class 기반의 컴포넌트들을 많이 볼 수 있습니다. 사실 , 사용하다보면 React는 완전 다른 생태계를 구축해서 다른 언어같지만, JS의 라이브러리일 뿐이죠!
즉 ,React에서도 JS를 사용할 수 있고 , JS와 JSX를 적절하게 섞어서 쓸 수 있습니다.
저번에 작성했던 코드를 그대로 가져와 보겠습니다.
<body>
<div id="root"></div>
<script type="text/babel">
const element =
<>
<h1>나는 H1</h1>
<h3>나는 H3</h3>
<h5>나는 H5</h5>
</>
ReactDOM.createRoot(root).render(element);
</script>
</body>다양한 Element를 하나의 root에 넣는것 해봤습니다. 그렇다면, h1,h3,h5에 각각 다른 내용을 넣고 싶다면 어떻게 할까요 ?
예를들어 , 쇼핑몰 홈페이지에서 상품의 이름 ,가격, 별점 등의 정보를 넣는다고 생각하면 됩니다.
제일 쉽게 떠오르는 것은 element를 함수화 시켜, Parameter(매개변수)를 받는겁니다. 쇼핑몰의 상품리스트 object가 들어온다고 했을 때, paint와 같은 함수를 아래와 같이 작성할 수 있습니다.
const paint = ({name,cost,...etc}) =>(
<>
<div>{name}</div>
<h1>{cost}</h1>
</>
);즉, 이렇게 코드를 작성할 수 있다는 이야기죠!
<body>
<div id="root"></div>
<script type="text/babel">
const items={
name:"후드티",
cost:54000,
tag:"캐주얼",
rate:4.5,
}
const element =
<>
<h1>나는 H1</h1>
<h3>나는 H3</h3>
<h5>나는 H5</h5>
{paint(items)}
</>
ReactDOM.createRoot(root).render(element);
</script>
</body>
React는 이러한 형태의 JS와 JSX를 혼합해서 하는 형태는 코드의 Flow(흐름)을 해친다고 생각했습니다. 그래서, 특별히 준비한게 있습니다.
함수를 대문자로 작성했을 때, 해당 함수는 JSX 형태로 쓸 수 있게 됩니다. 즉, 아래와 같이 코드가 변경되면서, element의 Props로 던져줄 수 있습니다. 이 점은 코드의 흐름을 안해치면서, props에 엄청난 확장성을 가져오게 됩니다.
(Currying이 떠오르네요!)
const Paint = ({name,cost,children}) =>(
<>
<h1>{name}</h1>
<h3>{cost}</h3>
{children}
</>
)
const element =(
<>
<h1>나는 H1</h1>
<h3>나는 H3</h3>
<h5>나는 H5</h5>
{paint(props)}
<Paint name="후디" cost="5000">
<h1>hi!</h1>
<h2>난 h2야 !</h2>
<Paint name="나는 맨투맨이야!" cost=6000/>
</Paint>
</>
);CodePen으로 작성해봤습니다.
See the Pen React,JSX by Doge (@DogeIsFree) on CodePen.
그럼, 혼합해서 쓰는게 안좋은것 처럼 느껴질 수 있지만 , 전혀 아닙니다. 유용했던 부분들은 React가 남겨놨습니다.
바로, 조건문과 반복문의 로직을 사용할 수 있게끔 했습니다.
React의 조건문과 반복문
하나의 상황을 가정하겠습니다. 첫글자가 "1"이면 1입니다! 를 출력하고, "0"이면 0입니다!를 출력하고 싶다고 합시다.
흠 , 일단 JS 문법과 JSX를 같이 쓸 수 있다고 했으니까, 아래와 같이 코드를 작성해도 될 것 같습니다.
const Flag = ({text}) =>{
if(text.charAt(0)==="1"){
return <h1>1입니다!</h1>
}else if(text.charAt(0)==="0"){
return <h1>0입니다!</h1>
}else{
return <h2>똑바로 입력해주세욘</h2>
}
}잘 동작되는지 Codepen으로 확인하면, 됩니다!
See the Pen React,JSX by Doge (@DogeIsFree) on CodePen.
React는 If문 보다는 삼항 연산자를 권장하고 있습니다. 왜냐하면, 삼항 연산자가 더욱 짧고 , 코드의 가독성을 높여주거든요! 하지만, 사람마다 다르니까 , 자신이 잘할 수 있는 방법으로 작성하면 됩니다. (저는 삼항연산자로 배웠기에, 삼항연산자로 앞으로 하겠습니다!)
간단한 예제로, 홀수를 판별하는걸 React로 만들어보겠습니다.
React에서 반복문은 array의 map을 주로 사용합니다. map 사용법은 MDN을 참고하면 됩니다!
See the Pen React,JSX 2 by Doge (@DogeIsFree) on CodePen.
'Web Front-end > React' 카테고리의 다른 글
| [React/Basic/Component/State] React의 State (2) | 2022.09.16 |
|---|---|
| [React/JS/SPA/Render] React의 Rendering (0) | 2022.09.16 |
| [React/jsx/DOM/Basic] React의 DOM 조작과 JSX (0) | 2022.09.14 |
| [React/JSX/Component] React의 특징(2) (0) | 2022.07.18 |
| [React/SPA/View] React의 특징 (0) | 2022.07.18 |