React 학습하기에 앞서

• 시스템 요구사항 :

  • 운영 체제 : Windows
  • Node.js : v20.18.0(LTS)
  • npm : Node.js와 함께 설치된 것 사용.

• 기본 도구

  • 코드 에디터 : Visual Studio

• 패키지 관리 도구

  • Npm: Node.js와 함께 제공되며, 페키지를 설치하고 관리하는데 사용됩니다.
  • yarm: Facebook에서 만든 대안적인 패키지 관리도구

  # 초반에는 Npm으로 진행하다가 yarm으로 갈아타려고 합니다.

React 공부를 시작할 때, 제일 처음 접한 것이 인프런의 '처음 만난 리액트' 입니다.

• 처음 만난 리액트 (인프런)
  # 따라서 이 블로그를 작성할 때는 해당 영상 내용을 바탕으로 제가 필요한 부분에 따라 이야기를 덧붙일 생각입니다.

1. 개발환경 설정하기

- Next.js 설치

가장 먼저 해야 하는 일은 Next.js를 까는 일입니다.
이는 Node.js 공식 웹사이트를 통해 설치합니다.

이후 모두 설치가 완료되었는지, Visual Studio 터미널에서

• npm --version
• node --version

를 통해 확인합니다.

- Create React App 설치하기

npx create-react-app (본인의 프로젝트 명)

틀 통해 프로젝트를 생성합니다.

프로젝트를 만드는데 오랜 시간이 걸리니, 참을성을 가지고 기다립시다. 아니면, 내 컴이 구려서 그런 걸 수도 있고..

- 만든 프로젝트 확인하기

프로젝트를 만들고 난 후에는, 바로 프로젝트를 열 수 없습니다. 왜냐하면 기존 위치에서 새로운 폴더가 생성되고, 그 안에 프로젝트가 있기 때문입니다.
그렇기에
터미널을 통해서

cd (본인의 프로젝트 명)

이동한 후,

npm start

를 통해서 본인의 프로젝트가 시작되는 것을 확인합니다.

1-1. 사용하면 좋은 라이브러리

출처: React 전문가들이 추천하는 15가지 라이브러리

- Axios

npm i axios

Axios는 브라우저와 Node.js를 위한 간단한 Promise 기반 HTTP 클라이언트입니다. 작고 확장 가능한 인터페이스를 제공합니다.
어떻게 사용할 지 잘모르니 해당 글도 나중에 포스팅해봅시당...

- React Router Dom

npm i react-router-dom

React Router Dom은 웹 애플리케이션에서 라우팅과 내비게이션을 관리하는 데 사용됩니다.
리액트 라우터의 주요 장점은 다른 페이지로 링크를 클릭할 때 페이지가 새로고침되지 않아, 빠르게 화면을 전환하는 효과를 전달할 수 있습니다

- Dotenv

npm install dotenv --save

Dotevn는 .env 파일에서 환경 변수를 process.env로 로드하는 종속성이 없는 모듈입니다. 코드 내에서 노출되서는 안되는 값들을 보호하는 역할을 합니다.

- EsLint

npm i eslint

Eslint는 인기 있는 오픈소스 자바스크립트 Linting 유틸리티입니다. 잠재적인 오류를 분석하고 코딩 표준을 검사하며 코드 품질을 향상시킵니다. 사소한 실수를 했을 때, 코드베이스 전체에서 일관성을 유지하는데 도움이 됩니다.

- react-error-boundaries

npm install react-error-boundary

에러 바운더리는 자식 컴포넌트 트리 어디에서든 자바 스크립트 에러를 캐치하고 해당 오류를 로깅하여 충돌한 컴포넌트 트리 대신 폴백 UI를 표시하는 리액트 컴포넌트입니다.
이것도 나중에 포스팅해야지...ㅎ 에러를 한 번 보고 싶네용.

- styled-components

npm i styled-components

Styled-components는 리액트와 리액트 네이티브 개발자가 UI 컴포넌트와 스타일을 한 파일 위치에 정의할 수 있도록 하는 오픈 소스 라이브러리입니다.
자바스크립트(JSS)로 CSS를 사용하여 개발자가 자바스크립트 파일에서 직접 CSS 코드를 작성할 수 있습니다.

2. JSX의 개념

JSX는 JavaScript XML 의 약자로, React에서 UI(User Interface)를 만들기 위해 사용하는 문법입니다. JSX는 JavaScript 코드 안에서 Html 과 유사한 구문을 사용할 수 있게 해줍니다.

- JSX의 특징

1. html과 유사한 문법 : JSX는 Html 과 비슷한 구문을 사용하여 React 컴포넌트를 정의할 수 있습니다.

const element = <h1>Hello, World<h1>

2. JavaScript 표현식 사용 : JSX 안에서는 JavaScript 표현식을 사용할 수 있습니다. 중괄호 {}를 사용하여 변수를 삽입합니다.

const name = 'Alice';
const element = <h1>Hello, ${name}!</h1>;

이렇게 했을 경우, H1의 크기로 "Hello, Alice"가 뜰 것입니다.

3. 컴포넌트 사용: JSX를 사용하여 React 컴포넌트를 쉽게 호출할 수 있습니다. 컴포넌트 이름은 대문자로 시작해야 합니다.

  function Greeting(){
  return <h1>Hello!</h1>
  }

  const element = <Greeting />

4. 속성 설정 : JSX에서는 Html 속성을 정의하는 것처럼 컴포넌트에 속성을 설정할 수 있습니다.

  const element = <img src="Image.png" alt="Description" />;

5. 조건부 렌더링: JSX 내에서 조건부 렌더링을 구현할 수 있습니다.

const isLoggedIn = true;
const element = (
    <h1>{isLoggedIn ? 'Welcome back!' : 'Please sign in.'}</h1>
);

주의할 점

• JSX는 HTML 보다 엄격합니다. 그렇기 때문에 JSX에서는 <br />과 같이 태그를 닫아야 합니다. 또한 여러개의 JSX 태그를 반환할 수 없습니다. <div>...</div> 또는 빈 <>...</> 래퍼와 같이 공유되는 부모로 감싸야 합니다.

  function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
  }

  다음은 예시입니다.

4. Element

React의 Element는 React 애플리케이션의 기본 구성 요소로, UI를 구성하는 가장 작은 단위입니다. React Element는 UI의 특정 부분을 정의하며, JSX를 사용하여 생성됩니다.

1. 생성

const element = <h1>Hello, world</h1>;

여기서 element라는 Element 요소를 생성하게 된 것입니다.
이후 더 자세한 내용이 있는데, 설명하기 많이 번거로우니 나중에 정리하겠습니다.

2. 불변성:
   React Element는 생성된 후 변경할 수 없습니다. 즉, 한 번 생성되고 element는 그 자체로 불변이며, 새로운 요소를 만들기 위해서는 복사하고 수정해야 합니다.

3. 렌더링:
   React element는 React Dom을 통해 실제 Dom에 렌더링 됩니다. ReactDom.Render를 사용하여 특정 DOM 노드에 렌더링할 수 있습니다.

ReactDOM.render(element, document.getElementById('root'));

해당 코드는 index.js에서 찾아볼 수 있습니다.

3. 컴포넌트 (Component)와 Props

컴포넌트와 props는 React에서 핵심 개념으로, UI를 구성하고 데이터 전달을 하는데 매우 중요합니다.

- 컴포넌트

React 앱은 컴포넌트로 구성됩니다. 컴포넌트는 고유한 로직과 모양을 가진 UI(User Interface)의 일부입니다. 컴포넌트는 버튼만큼 작을 수도 있고, 전체 페이지만큼 클 수도 있습니다.

예를 들어,

function Button(){
	return (
    <button>I'm a button</button>
    )
}

export default function Myapp(){
	return {
    	<div>
          <h1> Hello </h1>
          <Button />
        </div>
    }
}

이렇게 구성할 수 있습니다.

해당 방식으로 구현하면 다음과 같이 버튼이 보일 것입니다.

- 함수형 컴포넌트

: 간단한 함수로 정의되며, props를 인수로 받아 jsx를 반환합니다.

function Greeting(props){
	return <h1>Hello, {props.name}!</h1>
}

- 클래스형 컴포넌트

: ES6 클래스를 사용하여 정의도며, Render()메소드를 통해 JSX를 반환합니다. 상태(state)를 관리할 수 있습니다.

class Greeting extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!</h1>;
    }
}

해당 컴포넌트는 잘 사용되지 않으므로, 이런게 있다고만 알고 넘어가겠습니다.

- Props

props는 'properties'의 약자로, 컴포넌트에 전달되는 데이터입니다. 부모 컴포넌트에서 자식 컴포넌트로 전달되는 방법으로 사용됩니다.

• Props의 특징
  • 읽기 전용 : props는 자식 컴포넌트에서 변경할 수 없으며, 부모 컴포넌트에서만 수정 가능합니다.
  • 다양한 데이터 타입 : props는 문자열, 숫자, 배열, 객체 등 다양한 데이터 타입을 사용할 수 있습니다.
  • 기본값 설정 : 컴포넌트에서 props의 기본값을 설정할 수 있습니다.
    • 전달 : props는 JSX에서 HTML 속성과 유사하게 전달됩니다.

    <Greeting name="Alice" />

- Component와 Props의 함께 사용 예시

예시

function App() {
   return (
       <div>
           <Greeting name="Alice" />
           <Greeting name="Bob" />
       </div>
   );
}
function Greeting(props) {
   return <h1>Hello, {props.name}!</h1>;
}

여기에서 App은 부모 컴포넌트고 , Greeting은 자식 컴포넌트입니다. 부모 컴포넌트에서만 속성 값을 변경할 수 있음을 알 수 있습니다.

4. State와 Lifecycle

State와 Lifecycle은 컴포넌트의 동작과 상태관리를 이해하는데 중요한 개념입니다.

- State

State는 컴포넌트의 동적 데이터를 저장하는 객체입니다. 컴포넌트의 상태가 변하면, React는 해당 컴포넌트를 다시 렌더링하여 UI를 업데이트 해야 합니다. 고로 필요 없는 상황에 다시 렌더링되지 않도록, 주의해야 합니다.

1. state의 특징

   • 로컬 상태 : State는 해당 컴포넌트 내부에서만 접근할 수 있으며, 부모 컴포넌트와 자식 컴포넌트 간에 props를 통해 전달되지 않습니다.
   • 초기화 및 업데이트: State는 컴포넌트가 처음 렌더링될 때 초기화되며, setState 메서드를 사용하여 업데이트 할 수 있습니다.

   예시

   import {React, useState} from 'React'
   function Counter() {
   	const [count,setCount] = useState(0); // 상태 변수와 상태 업데이트 함수 선언
     return (
     	<div>
         <p>Count : {count}</p>
         <button onClick={()=>setCount(count+1)}>Increment</button>
     )
   	}

   여기서 잠깐!!
   use로 시작하는 함수들은 주로 Hook이라고 불리며, 함수형 컴포넌트에서 상태 관리 및 생명 주기 메서드등을 사용할 수 있게 해주는 기능입니다.
   더 자세한 건, 밑에서 설명하겠습니다.! Hooks 살펴보기

- Lifecycle

Lifecycle은 컴포넌트의 생명주기를 나타내며, 컴포넌트가 생성, 업데이트 및 제거되는 과정에서 호출되는 특정 메서드나 훅을 포함합니다. React의 생명 주기는 크게 세 단계로 나눠집니다.

• Mounting : 컴포넌트가 DOM에 추가될 때
• Updating : 컴포넌트가 업데이트 될 때 (state 또는 props의 변화)
• Unmounting : 컴포넌트가 Dom에서 제거될 때

- 함수형 컴포넌트의 Lifecycle

useEffect 훅을 사용하여 lifecycle 메서드를 구현할 수 있습니다.

import {react, useState} from 'React'
function MyComponent(){
	useEffect(() => {
    	//컴포넌트가 마운트될 때 실행
      
      return () => {
      		//컴포넌트가 언마운트될 때 실행
      }
    },[]); // 빈 배열을 전달하면 마운트와 언마운트 시에만 실행됨.
}

5. Hooks

Hook은 함수형 컴포넌트에서 상태(State)와 생명주기(Lifecycle) 기능을 사용할 수 있게 해주는 기능입니다. Hooks를 사용하여 상태관리와 사이드 이펙트를 처리할 수 있습니다. 그 중에서도 가장 대중적으로 사용되는 Hook들에 대해서 알아보겠습니다.
참고로 Hook의 이름들은 camel 표기법으로 사용되었습니다.

1. useState

useState는 함수형 컴포넌트에서 상태를 관리하기 위해서 사용하는 Hook입니다. 상태 변수와 그 상태를 업데이트하는 함수를 반환합니다.

예시

import React, {useState} from "react"
function Counter(){
	const [count, setCount] = useState(0);
  	return (
    	<div>
        	<p>Count: {count}<p>
              <button onClick= {()=>setCount(count+1)}>Increment</button>
    )
}

2. useEffect

useEffect는 컴포넌트가 렌더링된 후 특정 작업(사이드 이펙트)을 수행할 수 있게 하는 Hook입니다. 데이터 fetching, 구독 설정, Dom 조작 등을 처리하는데 사용됩니다.

예시

import React, {useState,useEffect} from "React"
function Timer() {
 const [seconds,setSeconds]= useState(0);
 useEffect(()=>{
   const interval = setInterval(()=>{
    	setSeconds(prev => prev + 1);
    },1000); // 1000ms, 즉 1초마다 setSeconds를 호출하는 코드 .
   return ()=> clearInterval(interval); //컴포넌트 언마운트 시 정리
    },[]); // 빈 배열을 전달하면 마운트와 언마운트 시에만 전달
 return <div>Elapsed time: {seconds} seconds</div>;
}

만약 [] 부분에 다른 배열을 넣는다면, 그 부분이 바뀔 때마다 값이 바뀜.

3. useContext

useContent는 React의 Context API와 함께 사용되며, 컴포넌트 트리에서 전역적으로 데이터를 공유할 수 있게 해줍니다.

예시

import React, {useContext} from 'react';
const ThemeContext = React.createContext('light');
function ThemeButton(){
	const theme = useContext(ThemeContext); // Context의 값을 가져옴.
  	return <button className={theme}>I am styled by theme context!</button>
}
function App(){
	return (
      <ThemeContext.Provider value='dark'>
        <ThemeButton />
      </ThemeContext.Provider>
}

4. 기타 Hooks

• useReducer:
  복잡한 상태 로직을 관리하기 위해 사용됩니다. Redux와 유사한 방식으로 상태를 업데이트할 수 있습니다.

• useRef:
  DOM 요소에 직접 접근하거나, 렌더링 간에 유지해야 하는 값을 저장할 때 사용됩니다.

• custom hooks:
  사용자 정의 Hook을 만들어서 코드 재사용성을 높일 수 있습니다. 특정 로직을 캡슐화하여 여러 컴포넌트에서 재사용할 수 있습니다.
  해당 부분은 GPT를 통해서 가져왔습니다.
  `해당 글들은 컨셉을 잡아서 다시 학습 글을 적도록 하겠습니다.'

5. Custom Hook

Custom Hook은 React에서 사용자 정의 훅을 만들어 재사용 가능한 로직을 캡슐화하는 방법입니다. Custom Hook을 사용하면 여러 컴포넌트에서 동일한 상태 관리와 사이드 이펙트 로직을 쉽게 공유할 수 있습니다. Custom Hook은 일반적으로 use로 시작하는 이름을 가지며, React의 내장 훅을 사용할 수 있습니다.

Custom Hook 만들기
Custom Hook을 만드는 기본 예제를 살펴보겠습니다. 창의 크기를 추적하는 Custom Hook입니다.
1. Custom Hook 작성

import {useState, useEffect} from 'react';
function useWindowSize(){
	const [windowSize, setWindowSize] = useState({
    	width: window.innerWidth,
      	height: window.innerHeight
    });
	useEffect(()=> {
      const handleResize = () => {
          	setWindowSize({
        	width: window.innerWidth,
          	height: window.innerHeight,
        });
      };
      window.addEventListner('resize',handleResize);
      //컴포넌트가 언마운트될 때 이벤트 리스너 정리
      return () => {
      	window.removeEventListner('resize',handleResize);
      }
    },[]);
  	return windowSize; 
 }

2. Custom Hook 사용

import React from 'react'
import useWindowSize from '/만든 파일 경로'
function App() {
	const {width, height} = useWindowSize(); //CustomHook 사용
  	return {
    	<div>
            <h1>Window Size</h1>
            <p>Width: {width}</p>
            <p>Height: {Height}</p>
        </div>
    }
}

6. Handling Event(이벤트 핸들링)

이벤트 핸들링(Handling Event)은 사용자와의 상호작용을 처리하는 방법을 말합니다. 이게 뭔 소리인데 즉, 특정 이벤트가 발생했을 때 실행되는 함수입니다. React는 HTML의 기본 이벤트 모델을 사용하면서 몇 가지 차별화된 특징을 가지고 있습니다. 이벤트 핸들링은 주로 컴포넌트의 상태를 변경하거나 UI를 업데이트하는데 사용됩니다.

이벤트 핸들러 사용 예시

import React, { useState } from 'react';
function ClickCounter(){
	const [count, setCount] = useState(0);
  	const handleClick = () => {
    	setCount(count + 1);
    };
  return (
  	<div>
      <p>Button Clicked {count} times</p>
      <button onClick={handleClick}>Click me</button>
    </div>
  );
}

• 이벤트 핸들러 정의 : handleClick 선언 부분이 이벤트 핸들러 정의입니다.

- 이벤트 객체

이벤트 핸들러에 전달되는 첫 번째 인수는 이벤트 객체입니다. 이 객체는 이벤트에 대한 정보를 제공합니다. 예를 들어, 클릭한 요소, 키보드 입력, 마우스 위치 등을 포함합니다.

const handleClick = (event) => {
	console.log(event); // 이벤트 객체 출력
}

다음과 같이 정보가 나옵니다.

- 이벤트 전파 및 기본 동작 방지

• 이벤트 전파: 이벤트는 DOM 트리를 따라 전파됩니다. React에서는 stopPropagation() 메서드를 사용하여 이벤트 전파를 중지할 수 있습니다.
• 기본동작 방지: 기본 동작을 방지하려면 preventDefault() 메서드를 사용합니다. 예를 들어서, 링크 클릭 시 페이지가 이동하는 기본 동작을 방지할 수 있습니다.

const handleSubmit = (event) => {
	event.preventDefault(); // 폴 제출 시 페이지 리로드 방지
  	console.log('Form submitted')
};

이가 필요한 이유는 새로운 동작을 했을 때, 필요 없는 재로딩을 방지하기 위함입니다.

6. 조건부 렌더링

조건부 렌더링(Conditional Rendering)은 React에서 특정 조건에 따라 컴포넌트나 요소를 렌더링하는 방법입니다. 이는 사용자의 입력이나 상태에 따라 UI를 변경하는데 매우 유용합니다.

1. 기본 조건부 렌더링

if문을 사용하여 구현하는 것입니다.

function Greeting(props){
	if (!props.isLoggedIn){
    	return <h1>Welcome Back!</h1> 
    } else {
      return <h1>Please sign in.</h1>;
    }
}

팁 !
특정 속성만을 받고 싶다면 function Greeting({isLoggedIn})로 선언해서 사용할 수 있습니다. 이는 구조 분해 할당 방법으로 props를 간단하게 사용할 수 있습니다.

2. Ternary Operator(삼항연산자)

더 간단한 방법 입니다.

function Greeting({isLoggedIn}){
	return(
    	<h1>{isLoggedIn? 'Welcome Back!' : 'Please sign in'}</h1>
    )
}

이와 같은 방법으로 구현할 수 있습니다.