[React] JSX, Component

 

 

 

 

 

 

 

 

📌리액트 기초 개념

 

 

📍JSX

 

JavaScript를 확장한 문법

React에서는 DOM과는 다르게 css,jsx 문법만을 가지고 웹 애플리케이션을 개발할 수 있다.

DOM에서 JS와 함께 사용하기 위해서는 js와 html을 연결하기 위한 작업이 필요

Inline 방식이나 script 태그를 이용해 외부 js 파일을 연결 가능

 

 

🔖 jsx를 써야하는 이유

 

명시적 코드 작성 : js 문법과 html 문법을 동시에 이용해 기능 구조를 한눈에 확인 가능

코드단순화, 가독성

 

 

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

function App() {
  const user = {
    firstName: "React",
    lastName: "JSX Activity"
  };

  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 활용

 

 

1️⃣ 하나의 엘리먼트 안에 모든 엘리먼트가 포함

 

<div> // 하나의 엘리먼트 안에
	<div> // 모든 엘리먼트가 포함
    	<h1>Hello</h1>
    <div>
    	<h2>world</h2>
    <div>
    <div>
</div>

 

2️⃣ 엘리먼트 클래스 사용 시, className 으로 표기

 

<div className="greeting">Hello!</div> // className

 

3️⃣ js 표현식 사용 시, 중괄호({ }) 이용

 

function App() {
	const name = 'Josh Perez';
    
    return(
    	<div>
        Hello, {name}! // jsx에서 js를 쓰고자 한다면 꼭 중괄호를 이용!
        </div>
    );
}

 

 

4️⃣ 사용자 정의 컴포넌트는 대문자로 시작

 

 

function Hello() { // 꼭 대문자로!
	return ~
}

function HelloWorld() {
	return <Hello />;
}

 

 

5️⃣ 조건부 렌더링에는 삼항연산자 사용

조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 합니다

 

 

<div>
{
	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>)
}
</div>

 

6️⃣ 여러 개의 html 엘리먼트를 표시할 때, map() 함수를 이용

 

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

function Blog() {
	const content = posts.map((post) => // html 엘리먼트 표시 "map()" 함수
    <div key = {post.id}>
    	<h3>{post.title}</h3>
    	<p>{post.content}</p>
    <div>
    );
}

return (
	<div>
    	{content}
    </div>
	);
}

 

 

 

post 정보를 담은 객체를 jsx 표현식으로 바꿔 리턴해주는 함수

 

 

 

 

📍Component-Based

 

"하나의 기능 구현을 위한 여러 종류의 코드 묶음"

"UI를 구성하는 필수 요소"

"컴포넌트는 리액트의 심장"

 

 

 

모든 리액트 앱은 최소 한 개의 컴포넌트를 가지고 있으며,

이 컴포넌트는 최상위 컴포넌트 - 근원(root) 역할을 하며 자식 컴포넌트를 가질수 있다.(계층적 구조(트리구조))