• grid-cols-1: 기본 사이즈 세로 1줄
• md:grid-cols-2: 브라우저 사이즈가 md(768px) 이상일 때, 세로 2줄
• lg:grid-cols-3: 브라우저 사이즈가 lg(1024px) 이상일 때, 세로 3줄 이런 뜻을 가지고 있다

export default async function Home() {
  // 무료 상품 API 문서: https://fakestoreapi.com/docs
  const response = await fetch('https://fakestoreapi.com/products');
  const products = await response.json();
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
      {products.map((product: Product) => (
        <div key={product.id} className="border shadow-sm">
          <Image src={product.image} alt={product.title} width={200} height={200} />
          <h1>{product.title}</h1>
          <p>{product.price}</p>
        </div>
      ))}
    </div>
  );
}

코드에서는 이렇게 사용되며 next.config.mjs에 설정해주면 된다

/* next.config.mjs */
/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "fakestoreapi.com",
      },
    ],
  },
};

export default nextConfig;

일반 css는

@media (조건) {
  스타일
}

/* 브라우저 너비가 768px 이상의 사이즈에서 아래 속성(display: flex)을 적용한다. */
@media (min-width: 768px) {
  .클래스명 {
    display: flex;
  }
}

/* 브라우저 너비가 768px 이하의 사이즈에서 아래 속성(display: flex)을 적용한다. */
@media (max-width: 768px) {
  .클래스명 {
    display: flex;
  }
}

css를 작성하듯이 작성하면 된다.

해결 방법 폴더명 변경: 먼저 코드로 돌아가 현재 컴포넌트 폴더의 이름을 완전히 다른 이름으로 변경하고 이를 커밋합니다. 원래 이름으로 복구: 그런 다음, 다시 원래 의도했던 대문자로 변경된 컴포넌트 폴더 이름으로 수정하고 커밋합니다. 배포 시도: 이러한 단계를 거친 후, 성공적으로 배포를 완료할 수 있었습니다. 이 과정을 통해 배포 오류를 해결하고 문제 없이 배포를 마칠 수 있었습니다. 대소문자 변경과 관련된 Git의 특성을 이해하는 것이 중요하다는 것을 다시 한번 깨달았습니다.

⚡컴포넌트 (Component)란?

리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위를 사용합니다. 쉽게 말하면 리액트에서 앱을 이루는 가장 작은 조각이라고 할 수 있고, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 '컴포넌트'라고 할 수 있습니다. 리액트의 중요한 핵심인 '컴포넌트'에는 함수 컴포넌트, 클래스 컴포넌트 2가지가 있습니다. 

• 컴포넌트 구성 요소 

1) property(props) 

• 부모 컴포넌트에서 자식 컴포넌트에 전달되는 데이터입니다. 프로퍼티값은 자식 컴포넌트에서 수정할 수 없습니다.  2) state
• 컴포넌트의 상태를 저장하고 수정 가능한 데이터입니다.  3) context 
• 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에게 전달하는 데이터입니다. 

📌함수(Function) 컴포넌트

자바스크립트의 "함수(function)" 기반 컴포넌트입니다. 자바스크립트 함수를 선언하듯이 function 으로 컴포넌트를 정의하고, return 문에 JSX 코드를 반환합니다.

function MyComponent() {
  return (
    <div>
      Hello React!
    </div>
  );
}

또는 화살표 문법으로도 나타낼 수 있다.

const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

📌클래스(Class) 컴포넌트

클래스 컴포넌트는  자바스크립트의 "클래스" 기반 컴포넌트로, class로 정의하고 render() 함수에서 jsx 코드를 반환합니다. 

• 클래스 컴포넌트 특징 

1) class 키워드로 클래스 컴포넌트 생성2) React.Component 상속 React의 ComponentClass를 상속받아  Component 상속이 필요해요.  3) render () 메서드 필수로 사용    클래스 컴포넌트 안에 render() 메서드가 꼭 필요하고 메서드 안에 JSX 를 리턴합니다.  4) this 키워드 사용하기  state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용합니다. 

• 클래스 컴포넌트 생성하기  클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에 반드시 {Component}를 import 하고 React.Component 를 상속받아야합니다. 

import React, { Component } from 'react';

Component 를 상속받고, render() 메서드를 통해 return 문 안에 있는 JSX 코드를 반환합니다. 

class MyComponent2 extends Component {
    render() {
        return (
            <div>
                Hello React!
            </div>
        );
    }
}

당신의 집에는 빛을 켜고 끄는 스위치가 있습니다. 이 스위치는 두 가지 상태를 가집니다: 켜짐(on)과 꺼짐(off). 이제 이 스위치를 useState를 사용하여 설명해보겠습니다.

상태(state)란 무엇인가?

상태는 어떤 것의 현재 상황이나 조건을 나타냅니다. 예를 들어, 스위치의 상태는 "켜짐" 또는 "꺼짐"일 수 있습니다.

useState가 무엇인가?

• useState는 이 상태를 관리하고 변경할 수 있게 해주는 도구입니다. React에서는 웹 페이지나 애플리케이션의 상태를 관리하기 위해 *useState를 사용합니다.

useState 사용 예시

1. 상태를 선언하기 스위치의 상태를 선언합니다. 초기 상태는 "꺼짐"으로 설정합니다.

    const [switchState, setSwitchState] = useState('off');
   

   여기서:

   • switchState는 스위치의 현재 상태입니다. 초기값은 'off'입니다.
   • setSwitchState는 스위치의 상태를 변경할 수 있는 함수입니다.

2. 상태를 변경하기 스위치를 켜거나 끄는 함수입니다. 스위치를 누르면 상태가 변경됩니다.

    function toggleSwitch() {
      if (switchState === 'off') {
        setSwitchState('on');
      } else {
        setSwitchState('off');
      }
    }
   

   이 함수는 스위치가 꺼져있으면 켜고, 켜져있으면 끄는 역할을 합니다.

3. 상태를 사용하기 상태를 사용하여 스위치의 상태를 표시합니다.

    javascript코드 복사
    return (
      <div>
        <p>Switch is {switchState}</p>
        <button onClick={toggleSwitch}>Toggle Switch</button>
      </div>
    );
   

   여기서:

   • Switch is {switchState}는 현재 스위치의 상태를 화면에 보여줍니다.
   • Toggle Switch 버튼을 클릭하면 toggleSwitch 함수가 호출되어 스위치의 상태가 변경됩니다.

종합 예시

이제 위의 모든 것을 합쳐보겠습니다.

javascript코드 복사
import React, { useState } from 'react';

function LightSwitch() {
  const [switchState, setSwitchState] = useState('off');

  function toggleSwitch() {
    if (switchState === 'off') {
      setSwitchState('on');
    } else {
      setSwitchState('off');
    }
  }

  return (
    <div>
      <p>Switch is {switchState}</p>
      <button onClick={toggleSwitch}>Toggle Switch</button>
    </div>
  );
}

export default LightSwitch;

이 코드에서:

• useState('off')는 스위치의 초기 상태를 'off'로 설정합니다.
• toggleSwitch 함수는 스위치의 상태를 'on' 또는 'off'로 전환합니다.
• 버튼을 클릭하면 스위치의 상태가 변경되고, 화면에 현재 상태가 업데이트됩니다.

props

properties의 줄임말로 상위 컴포넌트가 하위 컴포넌트에 값을 전달(단방향 데이터 흐름) 할때 사용합니다.(단방향) 자식 컴포넌트에서 props는 읽기 전용으로 수정이 불가하다는 특징을 가지고 있습니다. 함수 컴포넌트, 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정할 수 없습니다. 부모 컴포넌트의 props를 변경하면, 해당 props를 사용하고 있던 자식 컴포넌트는 리렌더링 됩니다.

사용방법

 프로퍼티에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 한다. 

컴포넌트에 props 전달하기

React 컴포넌트는 props를 이용해 서로 통신합니다. 모든 부모 컴포넌트는 props를 줌으로써 몇몇의 정보를 자식 컴포넌트에게 전달할 수 있습니다. props는 HTML 어트리뷰트를 생각나게 할 수도 있지만, 객체, 배열, 함수를 포함한 모든 JavaScript 값을 전달할 수 있습니다.

코드와 함께 살펴보면

export default function Profile() {
  return (
    <Avatar />
  );
}

위의 코드는 어떠한 전달하지 않는 부모 컴포넌트가 Profile 자식 컴포넌트가 Avatar인 코드입니다.

자식 컴포넌트에 props 전달하기

export defeult function profile() {
  return(
    <Avatar
     person={{ name: 'Lin Lanying', imageId: '1bX5QH6' }} //{}중괄호안의 객체
  size={100}
    />
   );
}

위의 코드는 부모가 자식에게 person (객체)와 size (숫자)를 전달했습니다. 여기서 중괄호가 두번쓰이는것은 중괄호안의 객체를 뜻합니다.

자식 컴포넌트 내부에서 props 읽기

function Avatar({ person, size }) {
  // person과 size는 이곳에서 사용가능합니다.
}

Avatar에 렌더링을 위해 person 과 size props를 사용하는 로직을 추가하면 완료됩니다.

이제 Avatar를 다른 props를 이용해 다양한 방식으로 렌더링하도록 구성할 수 있습니다.

배열

const persons = [
{ name: "철수", age: 19, gender: "남" },
{ name: "짱구", age: 20, gender: "남" },
{ name: "유리", age: 21, gender: "여" },
];

find

배열에서 조건(return 우측의 연산자)에 만족하는 가장 먼저 발견된 것 하나만 찾을 수 있다.

ex)
const person = persons.find((person) => {
  return person.gender === "여"
});
  console.log(person);

결과

filter

배열에서 조건(return 우측의 연산자)에 만족하는 요소만 필터링 새로운 배열을 만들어 줌 (기존 배열은 그대로 둔다)

ex)
const result = persons.filter((person) => {
    return person.gender === "남"
  });

  console.log(result);

결과

map

• forEach와 똑같이 전체 배열 접근

• forEach와 다른 점: 새로운 배열을 만들어줌 → 변수에 담기 가능

  ⇒ 이 부분은 상당히 중요합니다. 리액트에서 forEach를 쓰지 않고 map을 쓰는 이유 

  • 각 요소가 바뀌었으면 하는 형태를 return 우측에 작성하기

  ex)
  const plus = persons.map((person) => {
  return {
    name: person.name,
    age: person.age + 10,
    gender: person.gender ,
  }
  })
  console.log(plus);

• 결과*

reactsms UI를 만드는javascript 라이브러리다. 쉽게 말하면 화면에 보이는 버튼이나 텍스트 상자 등을 코드로 묶어 재사용하기 편한 코드묶음이라고 생각하면 된다.

JSX

react는 JSX문법을 사용하는데 JSX는 JavaScript eXtension의 줄임말로 JS와 XML이 합쳐져 HTML과 JS의 형식과 문법이 유사하여 중첩된 태그들의 구조를 파악하기 쉽다.

UI

사용자 인터페이스(user interfaces, UI) 사용자 인터페이스 또는 유저 인터페이스(user interfaces, UI)는 사람(사용자)과 사물 또는 시스템(기계, 컴퓨터 프로그램 등) 사이에서 의사소통을 할 수 있도록 돕는 물리적, 가상적 매개체

라이브러리(library)

소프트웨어를 개발할 때 컴퓨터 프로그램이 사용하는 구체적이고 명확히 정의된 자원의 모임. 라이브러리에서는 어플리케이션 개발 흐름의 주도권이 나에게 있음. 예를 들어 내가 만든 집(프로그램)이 이미 있고 이케아(IKEA)라는 라이브러리에 가서 내 집을 꾸밀 도구들을 사 와서 꾸미는 것

프레임워크(framework)

복잡한 문제를 해결하거나 서술하는 데 사용되는 기본 개념 구조 또는 뼈대(skeleton). 프레임워크에서는 프로그램 개발 흐름의 주도권이 내가 아닌 프레임워크에 있음. 나는 이미 구현된 프레임워크 안에서 내가 만든 소스를 조립해 더하는 것