React 컴포넌트+ JSX의 기본 규칙

1. React 프로젝트 만들기

 => 설치 필요 항목 : Node.js, Yarn, VScode, Git (Powershell사용함)

 

1.create-react app 설치  
  npm install -g create-react-app

2.리액트 프로젝트 생성
  npx create-react-app begin-react

3. begin-react라는 디렉터리 생기고, 그 안에 리액트 프로젝트가 생성된다. 
  cd begin-react
  yarn start (or npm start)

-> 자동으로 브라우저 열리고, 리액트 아이콘 페이지를 확인 할 수 있다.

 

 

2. 리액트 컴포넌트 만들어보기

 

    1) src 디렉토리에 Hello.js라는 파일 만든다.

=> 리액트 컴포넌트는 함수형태로 작성할 수도 있고, 클래스로 작성할 수도 있다.

=> 마지막에 export를 해줘야 다른 컴포넌트에서 불러와서 사용할 수 있다.

 

   2) App.js에서 Hello.js의 컴포넌트를 불러와서 사용한다.

   

     => 컴포넌트는 일종의 UI 조각으로, 쉽게 재사용할 수 있다.

3) Index.js

  => 이 코드에서 ReactDOM.render의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미한다. id가 root인 DOM을 선택하고 있다.

 

 => public/index.html을 열어보면 내부에 <div id="root"></div>를 찾아볼수 있다. 따라서 리액트 컴포넌트가 렌더링될 때에는 렌더링된 결과물이 div 내부에 렌더링된다.

 

 

3. JSX 기본 규칙 알아보기

   => JSX는 리액트에서 생김새를 정의할 때, 사용하는 문법이다. HTML처럼 생겼지만 실제로는 JS이다.

   ex) return<div>안녕하세요!</div>

 

   => 리액트 컴포넌트 파일에서 XML 코드 형태로 코드를 작성하면 babel이 JSX를 JavaScript으로 변환을 해준다.

=> Babel은 자바스크립트의 문법을 확장해주는 도구, 편의상 사용하는 자바스크립트 문법을 정식 형태로 변환시켜준다. 그렇지만 JSX를 JavaScript로 변환하려면 규칙이 몇가지 있다. 

   1) HTML의 여는 태그가 있다면 닫는 태그를 반드시 사용한다. self closing tag라도.

   2) 두개 이상의 태그는 반드시 하나의 태그로 감싸져야 한다.

=> 그렇지만, 단순히 감싸기 위해서 불필요한 태그를 사용하는건 좋지 않을 수도 있다.

  : 그럴땐 react의 Fragment를 사용하면 된다.

-> 태그 작성 시에 이름 없이 작성하게 되면 Fragment가 만들어지는데, Fragment는 브라우저 상에서 따로 별도의 엘리먼트로 나타나지는 않는다.

 

    3) JSX 안에 자바스크립트 값 사용할 때 

 -> JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 { } 로 감싸서 보여준다.

 

   4) Style과 className

     - JSX에서 태그에 style과 CSS class를 설정하는 방법은 HTML과는 다르다. 

        1) Inline style일 때는 객체 형태로 작성을 해야 한다.

        2) background-color처럼 -로 구분되어있는 이름들은 backgroundColor처럼 camelCase 형태로 네이밍한다.

     - 그리고 CSS class를 설정할 때에는 class가 아닌 className으로 설정해줘야 한다.

 

결과화면