React(리액트) 컴포넌트, JSX란!?

 

컴포넌트란?

  리액트에서 사용하는 기본단위라고 생각하면된다. 이 컴포넌트들이 모여 하나의 페이지가 되는것이다. 

function App()
  const a = [1,2,3,4,5]
  return (
   <div> {a}</div>
  );
}

     기본적인 형태는 함수의 형태이다. 즉 컴포넌트는 함수이다. 

     기존에 자바스크립트에서는 html따로 작성하고 js를 적용시켰다면 컴포넌트에선

     자바스크립트와 html를 한번에 할 수 가있다. 

       

 

컴포넌트 사용방법

    함수의 형태에서 변수나, 값들을 정해주고 return을 통해 결과값을 HTML로 화면에 나타낼 수 있다.

const App = () => {
  const users = [
    { id: 1, age: 30, name: "송중기" },
    { id: 2, age: 24, name: "송강" },
    { id: 3, age: 21, name: "김유정" },
    { id: 4, age: 29, name: "구교환" },
  ];
  return (
   <div className = "style">
    {users.map((user) => {
        if (user.age < 25) {
          return <Users user={user} key={user.id} />;
        } else {
          return null;
        }
      })}
      
    </div>
  );
}

export default App;

    컴포넌트는 함수이기 때문에 화살표함수로도 쓸 수있다. 

    코드스니펫을 보면 리턴을 기준으로 리턴 위에서는 자바스크립트 코드를 작성되어있고, 리턴 아래로는 html로 구성되어있다.

     정확히는 html이 아니라 JSX문법이다. 

    

   컴포넌트의 이름의 첫 글자는 대문자로 만들어야한다!

 

 

JSX문법이란?

 jsx는 리액트에서만 사용하는 html 문법이다. html이랑 생긴건 비슷하고 거의 똑같다 볼 수 있다. 

 자주사용하는 jsx문법이나 사용법에 대해 알아보자!

function App()
  const a = [1,2,3,4,5]
  return (
   <div> 
     <div>
     <P>안녕하세요.</P>
     <div/>
      <div>
     <P>반갑습니다.</P>
     <div/>
   </div>
  );
}

div태그 넣어 코딩하는것은 같지만 한개이상의 엘리먼트, 즉 태그가 들어갈수없다. 태그안에 태그가 묶여진 형태로 작성해야한다.

 

input태그처럼 닫는 태그가없는 경우에는 뒤에 '/'를 추가해야한다.

<input type='text' />

 

아예 태그 명칭이 달라지는 것도 있는데, 대표적으로 class이며 jsx에서는 clssName으로 사용한다.

<div class="이름"></div> // 기존 자바스크립트에서 class사용
<div className="이름"></div>//jsx문법으로 class사용

 

 그리고 자바스크립트를 가져올때는 {중괄호}를 이용해서 값을 가져온다. 또한 자바스크립트 문법을 바로 jsx에서 사용할 수 있는데

이 경우에도 {}를 사용한다. 

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const number = 1;

  return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      {/* JSX 내에서 코드 주석은 이렇게 씁니다 :) */}
      {/* 삼항 연산자를 사용했어요 */}
      <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}