React 마이 앱 만들기

npx create react-app "폴더명"

JSX

Javascript에 XML을 추가한 확장한 문법

하지만 React에서 쓰이는 문법이기 때문에 JS의 공식적인 문법은 아니다.
브라우저에서 실행되기 전 바벨을 사용하여 일반적인 JS 형태로 변환된다.
JSX는 한 파일에 JS와 HTML을 작성할 수 있어 편리하다.

JSX 문법

1. 반드시 부모요소 하나가 감싸는 형태여야 된다.
   - Virtual DOM에서 컴포넌트 변화를 감지할 때마다 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다. // 두 개 이상의 부모 태그요소가 존재할 수 없음
2. JS 표현식을 사용할 수 있다.
   - JS 표현식을 작성하려면 JSX내부에서 코드를 {}로 감싸주어 사용한다.
3. if문(for문) 대신 삼향 연산자(조건부 연산자)를 사용한다.
   - if 구문과 for 루프는 JS 표현식이 아니기 때문에 JSX 내부 JS 표현식에서는 사용할 수 없다.
   - 그렇기 때문에 조건부에 따라 다른 레더링 시 JSX 주변 코드에서 if문을 사용하거나, {}안에서 삼향 연산자(조건부 연산자)를 사용한다.
4. React DOM은 HTML Attribute 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
   - JSX에서 JS 문법을 쓰려면 {}를 사용하여야 되기 때문에, 스타일이나 class를 적용할 때도 객체 형태로 넣어주어야 한다. // font-size => fontSize , class => className

Props(Properties)

• 데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하기 위해 사용.
• 한 번 설정되면 props를 변경할 수 없다.
• 쉽게 말하면 함수의 매개변수

function App() {
  const name = 'Josh perez';
  return (
  		<div>
    		Hello, {name}
    	</div>
  );
}

State

• 컴포넌트에서 동적인 값을 상태(state)라고 부르며, 동적인 데이터를 다룰 때 사용.
• 값을 저장하거나 변경할 수 있는 객체로 주로 이벤트 핸들러와 함께 사용.

useState

• 함수형 컴포넌트에서 상태 관리를 할 때 사용

  import React, {useState} from 'react' // useState를 사용할 수 있는 React 모듈에서 가져와 선언해줌
  const [데이터, 변환데이터] = useState(초기값(생략가능));

import React, {useState} from 'react'

function CheckboxExample() {
  const [isChecked, setIsChecked] = useState(false);

  const handleChecked = (event) => {
    setIsChecked(event.target.checked);
  };

  return (
    <div className="App">
      <input type="checkbox" checked={isChecked} onChange={handleChecked} />
      <span>{isChecked ? "Checked!!" : "Unchecked"}</span> / //if/else문 대신 삼항연산자로 조건문 걸어주기
    </div>
  );
}
  

React에서의 Map()

• React에서 여러 개의 HTML Element를 표시할 때는 map() 함수를 사용한다.
• 주의할 점은 map() 함수를 사용할 때는 반드시 'key' 라는 JSX 속성을 꼭 넣어야 한다.

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

export default function App() {
  // 한 포스트의 정보를 담은 객체 post를 매개변수로 받고
  // obj를 JSX 표현식으로 바꿔 리턴해주는 함수 postToJSX
  const postToJSX = (post) => {
    return (
      <div key={post.id}>
        <h3>{post.title}</h3>
        <p>{post.content}</p>
      </div>
    );
  };

  return (
    <div className="App">
      <h1>Hello JSX</h1>
      {posts.map(postToJSX)}
    </div>
  );
}