JSX의 제한 사항[요구 사항] React는 JSX로 작업한다. JSX는 component에서 반환되는 코드로 React는 이 코드를 실제 DOM으로 렌더링한다. 하지만 JSX에는 제한 사항이 존재한다. return ( Hi there! This does not work :~( ) ; 만약 위의 코드처럼 component의 return 값에 복수의 JSX 요소들이 있다면 오류가 발생한다. 즉, root-level에서는 두 개의 JSX 요소가 인접해 있다면 다른 JSX 요소에 의해서 반환되거나 변수에 저장되지 않는다. React에서는 일반적으로 root JSX 요소가 하나여야만 한다. 저장하거나 반환하는 가장 위의 요소는 반드시 하나여야 한다. 그 이유는 명확한데, JavaScript에서는 둘 이상의 값을..
JSX가 무엇인지는 앞서 다뤄서 넘어가겠다. JSX란? JSX란? 아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다. // 📂 App.js function App() { return ( Let's get started! ); } export default App; 이것은 JSX라고 하며 JavaScript XML을 의미한다. 결국 HT coding-leaf.tistory.com React로 개발을 하다보면 JSX 형식으로 코드를 작성하게 된다. 하지만 브라우저는 JSX 형식을 인지하지 못하기 때문에 뒷단에서 변환하는 과정을 거친다고 했다. 덕분에 우리는 가독성 높고 간편한 JSX 형식으로 선언형 프로그래밍을 할 수 있게 되었다. 그러나, React를 사용할 때 무조건 ..
앞서 React란 무엇인지 다뤘다. React란 무엇일까? React의 정의 React 공식 홈페이지에 따르면, 사용자의 인터페이스를 짓는 JavaScript library라고 설명한다. 문자 그대로 해석은 가능하지만 무언가 직접적으로 와닫지 않는다. 그렇기에 React를 사용하 coding-leaf.tistory.com 굳이 React를 사용하지 않아도 어떤 웹사이트라도 구축할 수 있지만 더 복잡한 interface를 지닌 것을 구축할 때 React 같은 framework를 사용한다면 작업이 훨씬 수월해질 것이다. 사소한 문제들에 신경쓸 필요가 없으며, 오류도 덜 발생할 것이다. 그저 응용프로그램을 구성하고 핵심 비지니스 로직을 작성하는 것에 집중할 수 있을 것이다. 그것이 React와 같은 libra..
JSX란? 아래 코드를 보면 JavaScript 안에 있는 평소에 잘 보지 못하는 tag가 있다. // 📂 App.js function App() { return ( Let's get started! ); } export default App; 이것은 JSX라고 하며 JavaScript XML을 의미한다. JSX는 React project에서만 활성화되는 특수한 비표준 구문이다. 결국 HTML 역시 XML이라고 할 수 있기 때문에 문제없이 호환된다. React에 JSX 사용이 필수는 아니지만, 대부분의 개발자들은 JavaScript 코드 안에 interface 작업을 할 때 시각적으로 도움이 된다. 일반 .js 파일로는 이 용법을 해석할 수 없지만 뒷단에서 실행되는 JavaScript 파일로 변환되는 과..
