리액트란 무엇인가?

리액트란?

SPA를 위한 자바스크립트 라이브러리다 웹 UI를 작성하기 위한 목적으로 만들어졌으며 자바스크립트만을 이용해서 만들수 있고 UI영역의 재사용을 위해 '컴포넌트'라는 작은 단위로 개발을 진행한다

이렇게 만들어진 여러개의 컴포넌트를 조합해서 UI를 작성하게 된다

SPA란 Single Page Application의 약자로 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹 사이트를 말한다

리액트 사용이유

기존 자바스크립트로 화면을 만들면 코드가 길어지고 복잡해지기 쉽다 그러나 리액트는 화면을 부품처럼 나눠서 만들수 있어서 재사용이 쉽고 관리가 편하다

컴포넌트란?

화면의 한 부분을 의미하는 독립적인 코드 조각이다 모두 자바스크립트로 개발할수 있다

예시)

• Header 컴포넌트
• LoginForm 컴포넌트
• ProductCard 컴포넌트
• Footer 컴포넌트

이렇게 웹 페이지 전체를 한번에 만드는것이 아니라 작은 부품으로 나눠서 만든 뒤 합쳐서 하나의 화면을 구성하는 방법이다

리액트 컴포넌트 사용예시

버튼을 누를때마다 숫자가 올라간다고 했을때 동작과정이다

// react 라이브러리에서 useState 기능을 가져옴
// useState는 값이 바뀔 때 화면도 같이 다시 보여주게 해주는 기능이다
import { useState } from "react"; 

// Counter라는 이름의 컴포넌트 생성
// 컴포넌트는 화면의 한 부분을 만드는 코드라고 생각하면 된다
function Counter() {

  // count : 현재 숫자값을 저장하는 변수
  // setCount : count 값을 변경하는 함수
  // useState(0) : count의 시작값을 0으로 설정
  const [count, setCount] = useState(0);

  // 화면에 보여줄 내용을 return 안에 작성
  return (
    <div>
      {/* 현재 count 값을 화면에 출력 */}
      <h2>현재 숫자: {count}</h2>

      {/* 버튼을 클릭하면 count 값이 1 증가 */}
      <button onClick={() => setCount(count + 1)}>
        숫자 증가
      </button>
    </div>
  );
}

// Counter 컴포넌트를 다른 파일에서도 사용할 수 있도록 내보냄
export default Counter;

1. useState -> 숫자를 저장하는 변수 -> 0으로 시작

2.화면에 값출력 -> count의 값이 화면에 출력된다

3.버튼클릭시 값변경 -> 버튼 클릭시 setCount(count + 1)이 실행된다 ->리액트가 바뀐 값으 보고 화면도 다시보여준다

JSX 문법

자바스크립트의 확장 문법(JavaScript XML)으로 자바 스크립트안에서 HTML처럼 보이게 작성하는 문법이다 리액트에서 화면을 만들때 많이 사용한다 직관적으로 UI를 만들수 있다는 장점이 있다

원래 자바스크립트 

const element = React.createElement("h1", null, "안녕하세요");

jsx 사용

const element = <h1>안녕하세요</h1>;

기능은 비슷한데 jsx가 더 가독성이 좋다

jsx의 특징

HTML 처럼 보이지만 진짜 HTML은 아니고 자바스크립트 코드로 변환되어 실행된다

 예시

function App() {
  return (
    <div>
      <h1>안녕하세요</h1>
      <p>리액트를 공부하는 중입니다.</p>
    </div>
  );
}

JSX 안에서 자바스크립트 사용하기

중괄호를 사용해서 자바스크립트의 값을 넣을수 았다

function App() {
  const name = "정서화";

  return <h1>안녕하세요, {name}님</h1>;
}

JSX를 사용하는 이유

JSX를 사용하면

• 화면 구조를 한눈에 보기 쉽다
• UI 코드를 직관적으로 작성할 수 있다
• 자바스크립트와 화면 코드를 함께 다루기 편하다

그래서 리액트에서 화면을 만들 때 매우 많이 사용된다