[React] 기초

React

[React] 기초

벼리01 2024. 5. 14. 18:06

📌환경

Mac

VSCode

📌리액트란?

자바스크립트 라이브러리. 웹 애플리케이션에서 빠르고 쉽게 UI를 구현할 수 있도록 돕는다. 반복되는 코드 조각을 컴포넌트로 정의하여 재사용할 수 있고, 변경된 부분만 재랜더링하여 효율을 높인다.

- Vanilla JS : HTML 태그를 먼저 만들고 property를 설정한 뒤 Javascript 코드로 해당 태그를 변경함.

- React.js : 요소(Element)를 원하는 대로 생성한 뒤 HTML로 만들어서 렌더링함.

const span = ReactDOM.createElement(
	"span", 		// html 태그
    {id : "id"},		// property
    "Hello, I'm span"	// innerText
);

이렇게 직접 UI를 작성할 수 있지만 JSX 문법을 사용하여 HTML과 유사한 형태로 더 쉽게 코드를 사용할 수 있다.

<!DOCTYPE html>
<html>
<body>
    <div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
	const root = document.getElementById("root");

    // 컴포넌트
    // 반드시 대문자로 작성한다
    function Button() {
        return (
            <button id="btn"
            onClick = { () => console.log("Clicked!")}
            style={ {backgroundColor : "tomato" } }>
                Click me!
            </button>
        );
    }
    
    function Container() {
    	return (
        	<div>
            	<Button/>
            </div>
        );
    }
    
    ReactDOM.render(<Container/>, root);
    
</script>

`<div id="root"></div>` 안에 `Container` 컴포넌트를 ReactDOM이 넣어준다.

`render()`는 사용자에게 보여준다는 의미. 화면에 출력함.

📌시작하기

1. 리액트를 사용하기 위해서는 node.js가 필요하다. https://nodejs.org/en/download/package-manager에서 다운 받을 수 있다. (혹은 brew를 이용하여 다운 받을 수 있다. `brew install node@버전`)

* LTS : 기업을 위해 3년간 지원하는 버전. 서버를 안정적으로 운영해야하는 경우.

* Current : 최신 기능을 담고 있음. 예기치 않은 오류가 발생할 수 있다.

2. 리액트 프로젝트를 만든다. 원하는 위치에 폴더를 만들고, 해당 폴더에서 터미널을 켠다. (혹은 cd 경로 명령어를 사용해서 해당 폴더로 진입한다.) `npx create-react-app 프로젝트명` 을 입력하면 Create React app이라는 라이브러리를 통해 리액트 프로젝트가 만들어진다.

* 폴더를 생성하지 않고 원하는 경로에서 `npx create-react-app 프로젝트명` 을 입력하면 `프로젝트명`의 폴더가 생성되면서 리액트 프로젝트가 만들어진다.

* 특정 진행 상황에서 더이상 다운로드가 진전되지 않거나 프로젝트가 온전히 다운로드 되지 못하고 종료된다면, 인터넷 연결 또는 node 버전을 확인한다. 이미 실행중인 어플리케이션이 있다면 종료 후 다시 다운로드를 시도한다. 같은 오류가 반복되면 컴퓨터를 껐다 켜보는 것이 좋다.

`Happy hacking!`이라는 문구가 뜨면 완료되었다는 뜻이다. 해당 폴더를 들어가보면 다음과 같이 프로젝트가 생성되어있다. (blog는 처음 리액트를 다운로드할 때 설정한 이름)

vscode에서 프로젝트(폴더)를 열어준다.

node_modules 리액트 라이브러리 코드 보관함

public static 파일 보관함

src 여기가 코드 짜는 곳. app.js가 메인 페이지

package.json 프로젝트 정보

📌기초 문법

`App.js` 내 `App()`이라는 함수 내의 return문으로 html을 반환하는 형태로 되어있다.

자바스크립트 파일에서 html을 사용하는 희한한 방식처럼 보인다. return문 내의 html 태그처럼 보이는 것은 jsx문법으로, html과 유사하지만 몇가지 주의할 점이 있다.

1. class는 className으로 작성한다.

2. 인라인 style을 사용할 때는 `style=" color : 'red' "` 대신 `style = { { color : 'red'} }` 형태로 사용한다.

3. 변수는 return문 위에 선언하고, 값이 자주 변경된다면 변수 대신 useState를 사용한다.

4. 변수를 사용하거나, 컴포넌트의 return 문 안에 자바스크립트를 사용할 때는 중괄호 `{ }` 를 사용한다.

📌배열 디스트럭처링(Array Destructuring)

일반적으로 배열 내의 값을 일반 변수에 할당(디스트럭처링: 구조 분해 할당)하고 싶을 때는 다음과 같이 코드를 작성한다.

const[] food = ["tomato", "chocolate", "sandwich"];

const a = food[0];
const b = food[1];
const c = food[2];

console.log(a)	// tomato
console.log(b)	// chocolate
console.log(c)	// sandwich

ES6에서는 다음과 같이 배열로부터 각 요소의 값을 변수 리스트와 대칭시켜 할당할 수 있다.

const[] food = ["tomato", "chocolate", "sandwich"];

const [a, b, c] = food;

console.log(a)	// tomato
console.log(b)	// chocolate
console.log(c)	// sandwich

다음 코드는 위 문법과 동치한다.

const [a, b, c] = ["tomato", "chocolate", "sandwich"];

📌 Reference type useState 값 변경하기

array나 object를 참조하는 변수는 값을 그대로 갖고있는 것이 아니라 값이 저장된 메모리의 주소를 가지는 변수로, 값이 변경되더라도 변수(주소값)는 변경되지 않는다. 리액트 특성상 state의 값이 변경되지 않으면 다시 렌더링하지 않기 때문에, `title[0] = '변경될 값';` 처럼 값을 변경하더라도 (주소는 변경되지 않았으므로) html에 반영되지 않는다. 따라서 변수의 값을 변경하기 위해 기존 배열(혹은 객체)를 복사(얕은 복사)하여 값을 변경해준 뒤 set 해주면 주소값이 변경되었기 때문에 리액트가 재 렌더링하면서 html에 변경된 값이 적용된다.

function App() {
  let blogLogo = "React Blog";
  let [title, setTitle] = useState([
    "남자 코트 추천",
    "강남 우동 맛집",
    "파이썬 독학",
  ]);
  
  
  <div className="App">
  
  	 <button
        onClick={() => {
          let copy = [...title];
          copy[0] = "여자 코트 추천";
          setTitle(copy);
        }}
      >
        제목 변경
      </button>
      
      
      <div className="list">
        <h4>
          {title[0]}{" "}
          <span
            onClick={() => {
              setLike(++like);
            }}
          >
            👍
          </span>
          {like}
        </h4>
        <p>5월 6일 발행</p>
      </div>
      
      <div className="list">
        <h4> {title[1]} </h4>
        <p>5월 6일 발행</p>
      </div>
      <div className="list">
        <h4> {title[2]} </h4>
        <p>5월 6일 발행</p>
      </div>
  
  </div>
  
  
  
  
  );
 }

📌Hook

hook은 React 16.8버전에 새로 추가된 기능으로 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있도록 해주는 리액트 함수를 뜻한다.(class 없이 React를 사용할 수 있게 해준다.) 계층의 변화 없이 상태 관련 로직을 재사용할 수 있도록 돕는다.

State Hook, Effect Hook과 같은 몇가지 내장 훅이 존재한다.

📌useState

함수 컴포넌트 내에서 상태 값을 정의하고 값을 변경할 수 있는 리액트 내부 훅.

변수도 값을 변경할 수 있지만, 일반 변수는 변경되어도 렌더링되지 않기 때문에 html이 변경되지 않는다. useState를 사용하면 값이 변경될 때마다 렌더링해서 변경된 값을 보여주므로, 값이 자주 변경된다면 useState를 사용하는 것이 좋다.

useState는 innerText, id, class 모든 곳에 사용할 수 있다.

let [title, setTitle] = useState('리액트');

위와 같이 선언하면 `{title}` 과 같이 변수 이름으로 변수를 사용할 수 있고, 값을 변경하려면 `setTitle()`을 사용한다.

import React, { useState } from 'react';

function Example() {
  // "count"라는 새 상태 변수를 선언합니다
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

값과 값을 변경하는 함수(setter)를 가진 배열을 각각 디스트럭처링한다고 생각하면 된다. 위 코드에서 `count`의 초기 값은 0이 되며 `setCount()`로 `count`의 값을 변경할 수 있다.

`let` 또는 `const`와 같은 일반 변수의 경우 값이 변경되더라도 초기 할당된 값만 보여주기 때문에 직접 `ReactDOM.render()`함수를 호출해야만 변경된 값을 화면에 보여줄 수 있지만, `useState`를 사용하여 상태를 선언하고 값을 변경하면 컴포넌트가 재생성되면서 리액트가 변경된 새로운 값을 가지고 렌더링한다.

리액트는 변경을 감지하기 때문에 변경된 부분만 렌더링한다!

📌컴포넌트

컴포넌트는 자주 변경되는 코드 뭉치가 있을 때 미리 선언하는 용도로 사용하여 반복적인 html을 축약할 수 있다. 메인 함수(`function App() {}`) 바깥에 함수 형식으로 선언하고, 사용자 정의 태그처럼 사용한다.

단, 리액트가 대문자로 시작하는 것만 컴포넌트로 인식하기 때문에 반드시 대문자로 선언한다.

function App() {
  return (
    <div className="App">
      <Modal/>
    </div>
  );
}


function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세 내용</p>
    </div>
  );
}

📌Props

부모 컴포넌트로부터 자식 컴포넌트에게 전달하는 값. 부모 컴포넌트 내에 자식 컴포넌트를 선언하고, 속성을 정의하면 자식 컴포넌트에서 props 객체를 인자로 넘겨 받아 내부 값을 변경할 수 있다.

// 자식 컴포넌트
function Btn({text, fontSize = 12}) {
        return (
            <button
            style={ {
                backgroundColor : "tomato",
                color : "white",
                padding : "10px 20px",
                border : 0,
                borderRadius : 10,
                fontSize : fontSize,
            } }>
                {text}
            </button>
        );
}

// 부모 컴포넌트
function App() {
        return (
            <div>
                <Btn text="Continue" fontSize={18}/>
                <Btn text="hello!" fontSize={15}/>
            </div>
        );
}

이때 `props`의 값을 잘못 선언하여 전달하는 문제가 발생할 수 있는데, 이를 방지하기 위해 `PropsType`을 사용하여 미리 지정해주면 React가 오류를 인지한다.

Btn.propTypes = {
        text : PropTypes.string.isRequired,
        fontSize : PropTypes.number
    }

`PropsType`은 `string`, `number` 등 자료형 이외에 함수도 전달할 수 있고, `isRequired`로 반드시 값을 받도록 설정할 수도 있다.

📌useEffect

컴포넌트에 어떤 변화가 있을 때 특정 함수에 대한 실행을 제어하는 훅. 리액트는 변화하는 부분을 감지하여 최소 단위로 재렌더링하는데, API를 호출하는 등 한번만 실행되거나 특정 경우에만 실행하기를 원하는 경우 이 기능이 불필요한 경우가 있다. 이때 재렌더링을 막기 위해 `useEffect`를 사용할 수 있다.

첫번째 인자는 실행할 함수를 넣고, 두번째 인자는 `dependency List`를 넣는다. 두번째 인자에 빈 배열을 넣으면 `useEffect`가 아무것도 보고 있지 않으므로(변화를 감지하지 않으므로) 페이지가 렌더링 될 때 딱 한번만 실행된다.

`input` 창 내부의 값이 변화할 때만 실행하고 싶은 함수가 있다면, 코드는 다음과 같다.

import { useState } from "react";
import { useEffect } from "react";

function App() {
  const [keyword, setKeyword] = useState("");

  function onChange(event) {
    setKeyword(event.target.value);
  }

  useEffect(() => {
    console.log("Search for ", keyword);
  }, [keyword]);

  return (
    <div>
      <input
        value={keyword}
        onChange={onChange}
        type="text"
        placeholder="Search Here..."
      />
    </div>
  );
}

export default App;

`onChange` 이벤트 리스너가 `input`의 변화를 감지하고, `onChange` 함수를 실행하여 `setKeyword()`로 `keyword`의 값을 변경한다. `useEffect`가 `keyword`의 변화를 감지하였으므로, `console.log()`가 실행된다.

📌CleanUp 함수

컴포넌트가 파괴되거나 특정 값이 변경되기 직전에 실행되는 함수. `useEffect`의 첫번째 인자에 들어가는 함수의 `return`문에 작성한다.

`showing`의 참과 거짓에 따라 `<Hello>` 컴포넌트를 보였다 안 보였다(생성 또는 파괴)하는 작업이 있을 때, 컴포넌트의 생성과 파괴 시에 특정 동작을 실행하고 싶다면 다음과 같이 코드를 작성한다.

import { useState } from "react";
import { useEffect } from "react";

function App() {
  const [showing, setShowing] = useState(false);

  function onClick() {
    setShowing((prev) => !prev);
  }

  function Hello() {
    useEffect(() => {
      console.log("hi!");
      return () => console.log("bye!");
    }, []);

    return <div>Hello!</div>;
  }

  return (
    <div>
      <button onClick={onClick}>{showing ? "Hide" : "Show"}</button>
      {showing ? <Hello /> : null}
    </div>
  );
}

export default App;

📌참고

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders

React for Beginners

nomadcoders.co

Hook의 개요 – React

A JavaScript library for building user interfaces

ko.legacy.reactjs.org

Destructuring | PoiemaWeb

디스트럭처링(Destructuring)은 구조화된 객체(배열 또는 객체)를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할

poiemaweb.com

'React' 카테고리의 다른 글

[React] Can't resolve 'queryString' in ... (0)	2025.03.13
[React] 리덕스(Redux) (0)	2025.03.04
[React] To-do list 만들기 (0)	2024.05.27

🌟🌟🌟

[React] 기초

📌환경

📌리액트란?

📌시작하기

📌기초 문법

📌배열 디스트럭처링(Array Destructuring)

📌 Reference type useState 값 변경하기

📌Hook

📌useState

📌컴포넌트

📌Props

📌useEffect

📌CleanUp 함수

📌참고

'React' 카테고리의 다른 글

티스토리툴바

[React] 기초

📌환경

📌리액트란?

📌시작하기

📌기초 문법

📌배열 디스트럭처링(Array Destructuring)

📌 Reference type useState 값 변경하기

📌Hook

📌useState

📌컴포넌트

📌Props

📌useEffect

📌CleanUp 함수

📌참고

'React' 카테고리의 다른 글

관련글

티스토리툴바