깜짝 놀랐다. 요즘 신입들은 jQuery를 모른다고 한다 ㄷㄷ;
많은 비전공, 전공자들이 개발자 커리큘럼을 수료하는 것으로 알고 있는데
요즘은 JSP 같은 템플릿 엔진을 통한 서버 사이드 렌더링 웹 서비스 구축 교육과정을 안해서 그런가 싶다.
그만큼 개발 트렌드? 패러다임이 변했다.
하지만 대부분 SI에서 jQuery + Jsp 로 주로 구축하고 있는 실정이다.
뭐 나는 SPA가 도대체 뭔데 그렇게 물고 빠는거냐, 궁금해서 시작한 리액트 공부가
jQuery + Jsp로 프론트엔드를 만지작댔던, 나로써는 정말 신선한 충격을 받으면서 공부하고 있다 ㅎㅎ
아무튼, 웹은 HTML, CSS, JavaScript 를 기반으로 구성되어 있는데, jsp 파일에 html, css, js를 다 때려 박아도 기능 상의 문제는 없다.
하지만 실무에서는 코드 관리 및 유지보수 용이성을 위해 별도의 파일로 로직, 콘텐츠, 디자인 요소를 분리한다. 때론 직관적이지 못해 코드 찾아 삼매경인 경우도 있다 ㅋㅋ
리액트는 어떠한가?
JSX란?
JavaScript 파일 내에서 HTML과 유사한 마크업을 작성할 수 있는 JavaScript 구문
시대의 흐름에 따라 정적인 콘텐츠를 표현하는 것이 아닌 많은 인터랙션이 요구되고, 발생하여 동적인 콘텐츠를 표현하기 위해 많은 Dom 조작을 위한 스크립팅(JS)이 들어간다.
아무튼 html을 리액트 컴포넌트로 어떻게 바꾸냐면
순수 html
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>jsx로 html 코드 복사
export default function TodoList() {
return (
// 응 이거 안돼
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
);
}
일단 에러를 뿜게 되는데 그 이유는
JSX가 HTML보다 더 엄격하고 규칙이 몇 가지 더 있기 때문인데
왜 안되는지 비교적 친절한 에러메세지를 통해 파악이 수월하다.
<img>, <li> 에 클로징 태그가 없고 뭐 어쩌고 저쩌고 하네 ㅋㅋ
Error
/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (5:4)
3 | // This doesn't quite work!
4 | <h1>Hedy Lamarr's Todos</h1>
> 5 | <img
| ^
6 | src="https://i.imgur.com/yXOvdOSs.jpg"
7 | alt="Hedy Lamarr"
8 | class="photo"
JSX의 규칙
- 단일 루트 요소 반환
같은 레벨의 루트는 하나여야한다.
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
react.createElement를 확인해보면 알 수 있는데
각각의 컴포넌트를 렌더링할때 내부적으로 Nesting된 구조로 구성되기 때문에 단일 루트를 반환해야 한다.
<div>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
</div>
<div> 같은걸로 묶어 줄 수 있지만 중첩된 컴포넌트는 중복된 비어있는 <div> 역시 만들기 때문에
리액트는 Fragment 라는 빈 껍데기를 제공한다.
// 그래도 안돼
const Todo = ()=> {
return (
<>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
</>
);
}
export default Todo;
// 그래도 안돼
import react from 'react'
const Todo = () => {
return (
<react.Fragment>
<h1>Hedy Lamarr's Todos</h1>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
>
<ul>
<li>Invent new traffic lights
<li>Rehearse a movie scene
<li>Improve the spectrum technology
</ul>
</react.Fragment>
);
}
export default Todo;- 모든 태그는 명시적으로 닫혀야한다.
예전 xml이 나왔을 때도 xml parser, html parser를 만들기가 어려웠다고 한다.
엄격하지 않은 구조에서 수많은 개발자들이 enclosing tag를 무시했기 때문이다.
// 그래도 안돼
import react from 'react'
const Todo = () => {
return (
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
class="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>
);
}
export default Todo;- 순수 html의 예약어 등과 충돌을 피하기 위해 만든 문법 사용
class => className
import react from 'react'
const Todo = () => {
return (
<>
<img
src="https://i.imgur.com/yXOvdOSs.jpg"
alt="Hedy Lamarr"
// class =>
className="photo"
/>
<ul>
<li>Invent new traffic lights</li>
<li>Rehearse a movie scene</li>
<li>Improve the spectrum technology</li>
</ul>
</>
);
}
export default Todo;html to jsx
변환기를 통해 쉽게 변경할 수도 있다.
References
