[Next.js 공부]CSR 과 SSR , 기본 함수 , props의 이해 , 예매한 문법 출력값, initialData의 데이터의 연동방법

[Next.js 공부]CSR 과 SSR , 기본 함수 , props의 이해 ,  예매한 문법 출력값,  initialData의 데이터의 연동방법

 

 

리액트 컴포넌트 정의와 값을 증가시키는 기본 함수

 

 

// React 및 useState 훅 import
import React, { useState } from 'react';

// Counter 컴포넌트 정의
function Counter() {
  // count 상태 값과 이 값을 설정하는 setCount 함수를 선언
  const [count, setCount] = useState(0);

  // count 값을 증가시키는 increment 함수 정의
  const increment = () => {
    setCount(count + 1);
  };

  // count 값을 감소시키는 decrement 함수 정의
  const decrement = () => {
    setCount(count - 1);
  };

return (
<div>
<h2>Counter</h2>
<p>{count}</p>
<button onClick={increment}>Increment</button> {/* 버튼 클릭 시 increment 함수 호출 */}
<button onClick={decrement}>Decrement</button> {/* 버튼 클릭 시 decrement 함수 호출 */}
</div>

)
}

// Home 페이지 컴포넌트 정의. Next.js에서 각 파일은 하나의 페이지로 취급되므로,
// 이 파일은 "/" 경로에 대응하는 Home 페이지입니다.
export default function Home() {

return (
<Counter /> // Counter 컴포넌트 사용
);

}

 

 

props의 이해

props의 이해

// pages/example.js

import React from 'react';

// Next.js에서 초기 속성(props)을 받아와서 사용하는 페이지 컴포넌트
const ExamplePage = ({ initialData }) => {
  return (
    <div>
      <h1>Initial Data Example</h1>
      <p>This data was passed as initial props: {initialData}</p>
    </div>
  );
};

// 서버 측에서 초기 속성(props)을 준비하는 메서드
export async function getServerSideProps() {
  // 서버 측에서 데이터를 가져와 초기 속성(props)로 전달
  const initialData = "Hello from initial props!";
  
  return {
    props: {
      initialData,
    },
  };
}

export default ExamplePage;

 

 

 

 

 

 

 

 

React + Next.js 동작 원리만 이해 = CSR 과 SSR 차이의 관점에서"

 

Next.js 제대로 알고 쓰자. Next.js는 React의 SSR(Server Side… | by moonsj | Medium

Next.js 제대로 알고 쓰자

 

 

 

 

(구조 분해 할당) 에 대한 정리

 

 

2개의 변수 사용 (구조 분해 할당):
객체의 속성을 개별 변수로 분해해서 할당합니다.

jsx
Copy code
function ChildComponent({ count, increment }) {
  // ...
}

---

3개의 변수 사용 (구조 분해 할당 + 다른 변수 할당):
객체에서 분해한 변수 외에도 추가로 변수를 할당받을 수 있습니다.

jsx
Copy code
function ChildComponent({ count, increment }, additionalVar) {
  // count, increment 사용 가능
  // additionalVar도 사용 가능

 

 

 

자바스크립트 예매한 문법 출력값

 

const nestedArray = [{id : '001', name : 'John', age : '20'}, 'developer', ['apple', 'banana']];

const [{id}, occupation, [favoriteFood]] = nestedArray;

 

출력값

 

console.log(id);          // 출력 :  001
console.log(occupation);  // 출력 :  developer 
console.log(favoriteFood);// 출력 :  apple 

 

 

 initialData의 데이터의 연동방법

 

 initialData의 데이터의 연동방법

 

// ParentComponent.js
import React from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const initialData = 'Hello, World!';

  return (
    <div>
      {/* ChildComponent에게 initialData라는 props를 전달합니다. */}
      <ChildComponent data={initialData} />
    </div>
  );
}

export default ParentComponent;