[React] React 기초

JSX 문법

javascript와 html을 함께 사용할 수 있는 javascript의 확장된 문법

새로운 리액트 프로젝트 생성 방법

1. npm init react-app <폴더 이름>
   : create-react-app이라는 도구를 통해 새로운 리액트 프로젝트를 생성하는 명령어
2. VS Code에서 폴더를 열은 후 터미널에 npm init react-app . 입력

개발 모드 실행

npm run start
npm start
해당 주소로 프로젝트를 실행하는 명령어
개발 모드 실행
파일을 수정하면 그걸 인식하여 새로고침 하지 않아도 브라우저에 바로 반영

개발 모드 종료

Ctrl + C

Fragment

React에서 jsx 문법을 활용할 때 형제 관계에 있는 태그들은 반드시 그걸 감싸는 부모 태그가 존재해야 한다. 이때 fragment를 사용하여 의미없는 태그 사용을 줄이고 하나의 태그로 감쌀 수 있다.
fragment는 주로 축약형인 <></> 형태로 자주 쓰이는데, 그럼 import { Fragment } from 'react';와 같이 따로 fragment를 불러오지 않아도 되며 코드 또한 간결해진다.

jsx에서 javascript 활용하기

jsx에서 Javascript를 활용하기 위해 반드시 기억해야 할 점은 중괄호로 감싸줘야 된다는 것이다.
단, 중괄호 안에는 javascript 값만 사용할 수 있기 때문에 if문, for문, 함수 선언과 같은 값이 아닌 구문들은 jsx 안에서 사용할 수 없다.

self-closing

js에서는 반드시 닫는 태그를 작성해줘야 한다. 예를 들어 html에서 img태그는 닫는 태그가 없어도 정상적으로 작동하지만 jsx에서는 에러가 발생한다.<img> </img>와 같이 적어주거나 <img />로 self-closing 해줘야 한다.
cf. <div />와 <div></div>는 동일한 의미

React Element

import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello React!</h1>, document.getElementById('root'));

위 코드와 같이 JSX 문법으로 작성하는 대신,
아래 처럼 JSX 코드 부분(<h1>Hello React!</h1>)을 변수에 할당해서 활용해도 오류 없이 잘 동작한다.

import ReactDOM from 'react-dom';
const element = <h1>Hello React!</h1>;
ReactDOM.render(element, document.getElementById('root'));

만약 JSX 코드를 담고 있는 element라는 변수를 콘솔로 출력(console.log(element);)하여 개발자 도구를 확인해보면 자바스크립트 객체(Object)가 출력된다. 이러한 객체를 React Element라고 부른다.
React Element를 ReactDOM의 render 메소드로 전달하면 리액트가 해당 객체를 해석해서 HTML 형태로 브라우저에 띄워준다. (HTML로 렌더링)

React Component

React Element를 함수 형태로 만들면 jsx문법을 작성할 때 커스텀 태그처럼 활용할 수도 있는데, 아래 예시에서 Hello 함수가 리액트 컴포넌트(React Component)에 해당한다.

import ReactDOM from 'react-dom';

function Hello () {
  return <h1>Hello React!</h1>;
}

const element = (
  <>
  	<Hello />
  	<Hello />
    <Hello />
  </>
);

ReactDOM.render(element, document.getElementById('root'));

이때 리액트 컴포넌트는 첫 글자를 반드시 대문자로 작성해야 하며, jsx 문법으로 만든 리액트 엘리먼트를 리턴해줘야 한다.

function helloWorld //함수 (첫글자 소문자)
function HelloWorld //컴포넌트 (첫글자가 무조건 대문자)