[React] 컴포넌트 / JSX

오늘은 간단하게 컴포넌트, JSX가 무엇인지, 그리고 어떻게 사용하는지에 대한 사용법에 대해서 공부했습니다.

💡 컴포넌트

컴포넌트를 간략하게 설명하자면 화면을 구성하는 하나의 단위라고 할 수 있다.

예를들면, 검색 컴포넌트, 로그인 컴포넌트,
상품리스트 컴포넌트, 추천 상품 컴포넌트 등등 html 한 페이지를 각각의 컴포넌트로 나눠서 작성을 할 수가 있다.

컴포넌트를 사용함에 있어 장점은, 계속 재사용이 가능하다는점, 유지보수가 비교적 쉬운편, 협업하기에 좋다.
정도로 볼 수 있고,
단점으로는 프로젝트 크기가 커질수록 컴포넌트의 개수가 많아지기 때문에 폴더구조가 어지러울 수 있다.

사용법 예시

function App(){
  return <div></div>
}

결국에는 html을 리턴하는 함수가 컴포넌트 이다.

💡 컴포넌트 코드 보는법 (CRA 직후 App.js 파일)

// 컴포넌트 밖, 필요한 파일 import
import logo from "./logo.svg";
import "./App.css";

function App() {
  // 자바스크립트를 쓸 수 있는 영역
  return (
    // JSX를 쓸수있는 영역
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer">
          Learn React
        </a>
      </header>
    </div>
  );
}
// 컴포넌트를 다른데서 import할수있게 export
export default App;

주의할 점으로는

• 컴포넌트의 첫글자는 항상 대문자
• 폴더는 소문자로 시작하는 카멜케이스 / 컴포넌트파일은 대문자로 시작하는 카멜케이스

를 지켜주어야 한다. ( 개발자 끼리의 약속 )

한번 만들어 보기

import React from "react";
function App() {
  // <---- 자바스크립트 영역 ---->
  const click = () => {
    alert("클릭!");
  };
  return (
    /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: "100vh",
        display: " flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <div>이것은 내가 만든 App컴포넌트 입니다</div>
      <button onClick={click}>클릭!</button>
    </div>
  );
}
export default App;

기존에 html에서 사용하던 onclick과는 다르게 click() 이 아닌 click만 넣어주고
위의 자바스크립트 작성영역에는 const click = () => { } 이렇게 화살표함수로 사용해도 되고 function click() { } 방식으로 사용해줘도 된다.
스타일 같은 경우는 저렇게 내부로 주는방식도 있고, 파일을 따로만들어서 import해도 된다.

위에 코드에서 보면 JSX영역이라고 되어있는곳에 html문이 있고 속성사용법이 약간 다르다는 것을 알 수 있다.

이부분은 JSX에서 알아본다.

그리고 부모/자식 컴포넌트의 개념을 간단하게 짚고 간다면

import React from "react";

function Child() {
  return <div>나는 자식입니다.</div>;
}

function App() {
  return <Child />;
}

export default App;

이런식으로 자식 컴포넌트를 부모 컴포넌트 안에 태그형태로 사용할 수 있다. 위의 코드처럼 작성하면 화면에는 '나는 자식입니다.' 라고 나오는걸 볼 수 있다.

---

💡 JSX

JSX는 자바스크립트를 확장한 문법이다.

JSX에서는 html에서 사용하던 class 대신 className으로 사용하고,
무조건 1개의 element만 반환한다. 그리고 JS문법이나 값을 가져오려면 중괄호를 사용해줘야 한다.

// 오류예시 (2개의 element 사용)
return(
  <p>안녕! 리액트 :)</p>
  <div className="App">
    <input type = 'text'/>
  </div>
)

// 올바른 예시
return(
  <div className="App">
  <p>안녕! 리액트 :)</p>
  <input type = 'text'/>
  </div>
)

// JS 사용 예시
const number = 1;
return(
  <p>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
)

// 내부스타일 사용 예시
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}