이제 기초 작업물이
실행되었으므로
프로젝트 폴더에서
몇 가지 파일과 폴더를 확인할 수 있습니다
예시로
index.html 파일이 있습니다
그러나 파일을 열면
상당히 비어있는 것을 볼 수 있습니다
기본 마크업 밖에 없고
이미지, 제목 등과 같이
화면에 보이는
내용을 띄우는
HTML 코드는 찾아볼 수 없습니다
그 이유는, 이 내용을
화면에 옮기는 것은
리액트의
담당이기 때문입니다
index.html 파일에서
자바스크립트 파일을 로딩 할 수 있는 것이 보입니다
이 index.jsx 파일을 포함합니다
일단 .jsx라는 이상한 확장자는 무시하고
파일을 살펴보도록 하겠습니
보시다시피
소스 폴더인 src에서 확인 가능합니다
이를 열었을 때
자바스크립트 코드가 있는 것이 보입니다
그러나 여전히 웹사이트에 보이는 이미지 또는
제목과의 연결점을 찾을 수 없습니다
나중에 다시 살펴볼 내용을 제외하고
일단 App.jsx 파일에서 무언가를 불러오는 것이 보입니다
드디어 이 파일에서 화면에 보이는
내용에 대한 마크업이 보입니다
이 파일에는 코드가 있지만
자세히 살펴볼수록 헷갈릴 수 있습니다
자바스크립트 함수에,
즉, 자바스크립트 코드에
HTML 코드가 있는 것처럼 보이기 때문입니다
이것 또한 .jsx라는 이상한 확장자가 있습니다
index.jsx 파일과 더불어 이 파일은
비표준의 자바스크립트 문법을
사용하기 때문에 .jsx를 사용하는 것입니다
정확히 말하자면
JSX라는 자바스크립트 문법을 사용하는데
JSX는 JavaScript Syntax Extension
즉, JavaScript 문법 확장자를 의미합니다
이 확장자는 개발자가 자바스크립트 파일 내에
HTML 마크업 코드를 작성하여
HTML 요소를 설명하고 생성할 수 있게 합니다
리액트는 UI의 전체와 부분을
설명하고 생성하기 위한 것이므로
아주 유용한 기능입니다
거의 모든 리액트 프로젝트와
리액트 외의 프로젝트에 자주 사용되는
좋은 기능이긴 하지만
브라우저에는 사용이 불가능합니다
그러므로 index.jsx와 App.jsx 파일에 있는
코드는 브라우저에서 사용할 수 없습니
대신, 리액트 개발자로서 작성하는 코드는
브라우저에 도달하기 전에 개발 서버에서 변환됩니다
지금 같은 경우는 여기입니다
브라우저에서 사용 가능한 코드로 변환되는 것입니다
개발자로서는 감사하게도 JSX 확장자로 인해
보다 편리하게 UI를
설명할 수 있습니다
그러나 이 App.jsx 파일의 가장 중요한 점은
이것이 리액트 컴포넌트라는 점입니다
지난 강의에서 언급한 컨포넌트입니다
보시다시피 리액트에서 컴포넌트는
자바스크립트 함수와 같다고 볼 수 있습니다
리액트에서 컴포넌트로
인식되기 위해 다음과 같은
두 가지 중요한 규칙을 따라야 합니다
함수의 제목이 대문자로 시작해야 하며
함수에서 렌더링 가능한 값이 반환 되어야 합니다
대체로 나중에 렌더 될 HTML 마크업이 반환 됩니다
여기서 보이는
JSX 코드와 같습니다
지금까지 리액트에서 컴포넌트를 생성하는 방법이었습니다
평범한 자바스크립트 함수를 만든 후
대문자로 시작하는
적합한 이름을 부여하면
JSX 코드가 반환 됩니다
이것을 기반으로
드디어 첫 번째 커스텀 컴포넌트를 만들어 보겠습니다