[React] JSX/ map을 이용한 반복/ Component

코드스테이즈 41기 교육 내용을 정리하고 있습니다.
틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다.

🦍JSX

---

JSX는 Javascript XML로 줄인말로 문자열도 HTML도 아니다
React에서 UI를 구성할 때 사용하는 문법으로 Javascript를 확장한 문법이다.

React는 Javascript에서 사용했던 Dom과 다르게 JSX와 CSS문법만 가지고 웹 어플리 케이션을 만든다
기존 Dom에서 Html, Javascript, css를 사용했던 것과 차이가 난다.

화면의 구조를 짜는 html과 구성된 화면을 동적으로 하는 javascrit를 같이 다루면서 수정이 쉽고, 이해가 수월하다
나는 그렇다

물론 React에서 JSX없이 코드를 짤수 있지만, JSX문법을 사용하면 더 좋은 가독성과 코드의 간결함을 갖을수 있다.

import React from "react";
import "./styles.css";

function App() {
  const user = {
    firstName: "Lee",
    lastName: "Wang"
  };

  function formatName(user) {
    return user.firstName + " " + user.lastName;
  }
  // JSX 없이 활용한 React
  // return React.createElement("h1", null, `Hello, ${formatName(user)}!`);

  // JSX 를 활용한 React
  return <h1>Hello, {formatName(user)}!</h1>;
}

export default App;

JSX를 사용하지 않으면 createElement로 h1 태그를 만든후 안에 텍스트를 넣는 방식으로 사용해야 한다.
하지만 JSX를 사용하면 양옆에 Html처럼 <h1>태그를 두고 중괄호 안에 원하는 텍스트를 적는다.

Html처럼 태그를 사용하고, 안에 원하는 혹은 수정하고 싶은 데이터를 javascript문법으로 사용 할수 있다.
한눈에 봐도 편해 보이쥬? 헤헤

 

🐒JSX규칙

---

openTag와 closeTag사용

기존 html문법처럼 <h1> 처럼 태그를 열었으면 </h1> 태그를 닫아야하고 <h1/>도 가능하다

class사용

class속성 지정은 className으로 사용한다.

//<div class="HI">hi</div>
<div className="HI">hi</div>

중괄호 사용

javascript문법 사요시 중괄호 안에 사용한다.

<h1>Hello, {formatName(user)}!</h1>;

사용자 정의 컴포넌트

사용자 정의 컴포넌트는 명칭을 대문자로 시작한다.

function Hello(){    //->대문자!
  return (
    <h1>다들 안니용</h1>
    )
}
function App (){
  return(
    <Hello/>
    <div>방가워</div>
    )
}

이건 뒤에서도 다시 확인하면 된다 ㅎㅎ

 

조건부 렌더링

 

조건부 렌더링은 삼항연산자를 사용한다.
(조건)?true:false

<div>
  {(1+1===2)?(<div>정답</div>):(<div>실패</div>)}
  </div>

map

여러 개의 Html엘리먼트를 표시할 때는 map함수를 사용한다
또한 map함수를 사용하는 경우 반드시 key JSX속성을 넣어야 한다.
key는 고유한 번호로 부여해야하며, 랜덤같은거로 하면 당연히 안된다.

 

return

return 이후에 JSX문법을 사용하는데, 이 경우 return 바로 뒤부터 <div>와 같은 태그를 붙여야한다.
가독성을 올리고 싶은 경우, (소괄호를 붙이고 아래부터 JSX문법을 사용하면된다.

function App (){
  //return<div>방가워</div> -->이거도 가능
  return(
    <div>
        방가워
    </div> 
    )
}

🦍map을 이용한 반복

---

고차함수 map은 콜백함수를 인자로 받고, 배열의 모든 요소에 콜백함수를 적용시킨 새로운 배열을 리턴한다.

const posts = [
  { id: 1, title: "Hello World", content: "Welcome to learning React!" },
  { id: 2, title: "Installation", content: "You can install React via npm." },
];

다음과 같은 데이터가 있을 경우, map을 사용하여 화면에 출력해보자!

function App(){
    return (
      { posts.map((post)=>{
          <div key={post.id}>
              <h1>{post.title}</h1>
              <div>{post.content}</div>
          </div>
    });
}
}

🦍Component

---

컴포넌트는 하나의 기능을 구현하기 위한 여러종류의 코드의 묶음이다.
모든 리액트의 애플리케이션은 최소 하나의 컴포넌트를 가지고 있으며, 이 컴포넌트는 애플리케이션 내부적으로 근원이 되는 역할을 한다.
이 최상위 컴포넌트는 근원의 역할을 하므로 다른 자식 컴포넌트를 가질 수 있다. 이 계층 구조를 트리 구조로 형상화 할수 있다.