31일차

 

Syn 페이지를 만들고나서 옆의 OSI 7 Layer페이지를 useState를 활용해서 원하는 계층을 클릭하면 펼쳐서 볼 수 있게 바꿔봤다.

https://github.com/LeeSeungHun-35/newfile

GitHub - LeeSeungHun-35/newfile: 리액트 실습

 

 

useState

import React, { useState } from 'react';

const Counter = () => {
// count는 상태 변수고 setCount는 이 변수를 업데이트할 함수이다
    const [count, setCount] = useState(0);

    return (
        <div>
            <p>현재 카운트: {count}</p>
            <button onClick={() => setCount(count + 1)}>증가</button>
        </div>
    );
};

• useState를 호출하여 상태 변수와 이를 업데이트할 함수(상태 세터)를 반환받는다.
• 상태 초기화: useState의 인자로 상태의 초기 값을 설정합니다. 위의 예제에서는 0이 초기값이다.
• 상태 업데이트: 상태를 업데이트하려면 상태 세터 함수를 호출합니다. 위의 예제에서는 setCount(count + 1)을 호출하여 count의 값을 1 증가시킨다.

 

Props

• props는 컴포넌트 간에 데이터를 전달할 때 사용하는 속성이다.
• 사용: 부모 컴포넌트가 자식 컴포넌트에 데이터를 넘길때 사용, 자식 컴포넌트는 props로 데이터를 받아서 사용한다

function ParentComponent() {
  return <ChildComponent message="Hello, World!" />;
}

function ChildComponent(props) {
  return <p>{props.message}</p>;
}

 

Redux

• Redux는 애플리케이션의 상태를 전역적으로 관리할 수 있게 해주는 상태 관리 라이브러리이다.
• 개념
  • Store: 애플리케이션의 상태를 저장하는 객체이다.
  • Action: 상태를 변경하기 위한 이벤트를 정의 이다 .
  • Reducer: 액션을 처리하여 상태를 변경하는 함수 이다 .
  • Dispatch: 액션을 발생시키는 메소드 이다 .

const increment = () => ({ type: 'INCREMENT' });

function counterReducer(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1;
    default:
      return state;
  }
}
import { createStore } from 'redux';
const store = createStore(counterReducer);
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
  const count = useSelector((state) => state);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>Increment</button>
    </div>
  );
}

 

 

+개인 프로젝트 하는거 이제 슬슬 생각해봐야할 것 같다