• 출처 : 소플의 처음 만난 리액트
• 소스 코드 : soaple/first-met-react

# JSX 코드 작성해보기

( 이번 실습의 React.Component 코드는 뒤에서 배울 예정이기 때문에 지금 당장 이해할 필요는 없습니다. 여기에서는 JSX 코드에만 집중하면서 하나씩 따라해 보시기 바랍니다. )

1. 먼저 앞에서 VS Code로 create-react-app을 사용해서 만든 프로젝트 my-app을 엽니다.
2. 그리고 chapter_03이라는 이름의 폴더를 하나 생성합니다.
3. 다음으로는 만든 폴더에 Book.jsx라는 이름의 파일을 새로 만들고,
4. 아래 코드처럼 Book이라는 이름의 React 함수 Component 를 하나 만듭니다.
   

• Book Component 는 props로 name과 numOfPage를 받아서 이를 출력하는 Component입니다.
• 자바스크립트를 모르거나 JSX 에 대해 모른는 사람이 봐도 어떤 역할을 하는지 대강 이해할 수 있는 수준입니다.
• JSX를 사용하면 이처럼 가독성이 높고 직관적인 코드를 작성할 수 있습니다.

# 상위 컴포넌트

이번에는 Book 컴포넌트를 사용하는 상위 컴포넌트를 만들어보도록 하겠습니다.
1. 같은 폴더에 Library.jsx라는 이름의 파일을 새로 만들고,
2. 아래 코드처럼 Library라는 React 함수 Component를 하나 만듭니다.

• Library Component는 총 3개의 Book Component 를 렌더링하고 있습니다.
• 이 코드도 방금전 Book 컴포넌트 코드와 마찬가지로 굉장히 가독성이 높죠.

이처럼 JSX를 사용해서 코드를 작성하면 많은 장점이 있습니다.

# 렌더링

다음으로 우리가 만든 컴포넌트를 실제로 화면에 렌더링하기 위해서,
index.js 파일을 수정해야 합니다.

1. index.js 파일을 열어서 그림에 표시된 부분을 참고하여 수정합니다.

• 수정한 내용은 import문을 사용해서 방금 만든 Library 컴포넌트를 가져온 뒤에,
  React.DOM을 사용하여 root DOM 노드에 렌더링하도록 하는 코드입니다.

  참고) 리액트 버전이 업데이트되어 강의 속 index.js 파일의 내용과 약간 다르게 쓰여 있어서, 다음과 같이 수정하였습니다.

2. 모든 코드 작성이 끝났으면 실제로 React 애플리케이션을 실행해보도록 하겠습니다.
3. VS code의 상단 메뉴에서 Terminal > New Terminal 을 열어서 새로운 터미널을 하나 실행시킵니다.
4. 이후 npm start 명령어를 실행합니다.
5. 그러면 잠시 뒤에 웹브라우저의 새창이 열리면서 localhost:3000번 포트로 접속이 되는 것을 볼 수 있습니다.
   

• 그림처럼 우리가 작성한 내용대로 컴포넌트들이 렌더링된 것을 볼 수 있습니다.

만약 JSX를 사용하지 않고 코드를 작성했다면 어떻게 됐을까요?
이 코드는 JSX를 사용하지 않고 작성한 Book 컴포넌트 코드입니다.

• 
• JSX 를 사용하지 않고 React 컴포넌트를 작성하게 되면 코드의 양도 늘어나고 가독성이 굉장히 떨어지게 됩니다.
• 따라서 앞으로 React 애플리케이션을 개발할 때에는 무조건 JSX 를 사용한다고 생각하시기 바랍니다.
• JSX 를 사용하지 않고 코드를 작성해도 결과는 동일하게 나오는 것을 볼 수 있습니다.
  

📍정리

• JSX 를 사용하면 굉장히 짧고 간결한 코드로 컴포넌트(Component)를 만들 수 있습니다.
• React를 사용함에 있어 JSX 는 필수적인 요소에 가깝습니다.
• 공식 웹사이트에서도 JSX 의 사용을 권장하고 있기 때문에 앞으로 JSX 의 사용법을 잘 익혀서 활용하시기 바랍니다.

다음 강의에서는 React 의 element에 대해서 배워보도록 하겠습니다.