치킨의 정리정리 치킨의 정리정리

분류 전체보기

• [React] 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

  공부/React 2024. 2. 22. 00:33

  React는 원래 props를 이용해서 부모에서 > 자식으로만 데이터를 전달할 수 있다. 하지만 부모컴포넌트에서 데이터를 변경하는 함수를 props로 전달한다면 자식 > 부모로도 데이터를 전달(변경)이 가능하다. 자식➡️부모 데이터 전달하기 Parents.js import { use State } from "react"; import Child from "./Child.js"; function Parents (props) { let [name, setName] = useState("Chicken"); function ChangeName(name : string) { setName(name); } return ( {name} ) } export default Parents; Child.js function..

  Read More
• [React] localStorage 브라우저 데이터 저장

  공부/React 2024. 2. 20. 23:31

  1. 개념 localStorage는 브라우저에 제공하는 데이터 저장 메커니즘이다. 클라이언트 측에서 작은 양의 데이터를 로컬 컴퓨터에 영구적으로 저장할 수 있게 해준다. 주로 사용자 설정, 임시 데이터 등을 저장하는데 활용한다. F12(개발자 도구) > Application 항목 > localStorage 에서 확인 가능하다. 2. 사용방법 localStorage.setItem(‘Key’,’Value’) : 저장할 key값과 data를 입력하면 저장된다. localStorage.getItem(‘Key’) : 출력할 key값을 입력하면 해당 데이터를 출력한다. localStorage.removeItem(‘Key’) : 삭제할 데이터의 key 값을 입력하면 데이터가 삭제된다. 따로 데이터를 수정하는 문법은 ..

  Read More
• [React] Redux 문제 1. object 데이터를 버튼 클릭 시 1씩 증가하기

  공부/React 2024. 2. 20. 01:55

  let num = state.findIndex((a)=>{return a.id === action.payload}) state[num].count++; 데이터 출처 : 코딩애플 강의 store.js let user_cart = createSlice({ name : 'user_cart', initialState : [ {id : 1, name : 'White and Black', count : 2}, {id : 2, name : 'Grey Yordan', count : 1} ], reducers : { changecount (state,i) { //i값을 가져와서 출력하니깐 { } 형식으로 나와서 꺼내서 사용함 let conunt_number = i.payload; //state함수로 count값을 수정 ..

  Read More
• [React] Redux (toolkit) 라이브러리 사용 및 설치

  카테고리 없음 2024. 2. 19. 16:03

  1. 정의 Redux란? 여러 컴포넌트가 공유하는 State를 관라하기 위한 JavaScript 라이브러리다. React와 사용하기 위해서는 React Tool Kit을 함께 설치해야한다. Redux를 이용하면 하나의 js파일에 모든 state를 보관해 prorps 없이 state를 공유가능하게 만들 수 있다. 2. 설정 설치하기전 현재 리액트 버전이 18.1.0 버전 이상인지 확인 후 설치한다. ( 그 아래는 사용 불가) 추가로 NPM을 선행 설치해야한다. 설치를 위해 vscord 터미널에서 다음과 같이 명령어를 입력한다. npm install @reduxjs/toolkit@1.8.1 react-redux 설치가 완료됐다면 state를 관리하고 보관할 파일을 생성하고 설정한다. //현재 경로에서 dat..

  Read More
• [React] Context API 란?

  공부/React 2024. 2. 19. 15:01

  1. 정의 Context는 React Component 간 값을 공유할 수 있게 해주는 기능이다. 보통 props를 통해서 부모에서 자식 컴포넌트에게 데이터를 전달하지만 Context를 이용하면 부모에서 자식으로 데이터를 직접 전달하지 않아도 전역적으로 공유할 수 있게된다. 즉, props를 이용해서 자식에서 자식으로 연달아서 전달할 필요 없이 한번에 전달할 수 있게된다는 것 이다. 2. 사용법 Context는 React 패키지에서 createContext 함수를 불러와 만들 수 있다. //createContext import 한다. import { createContext } from "react"; //Context 컴포넌트 생성 export let Context = createContext(); C..

  Read More
• [React] useEffect 정리

  공부/React 2024. 2. 17. 17:37

  1. useEffect 란? React component가 새로 렌더링 될 때마다 특정 작업(Side Effect)를 실행할 수 있도록 하는 React Hook이다. Side Effect : React component가 화면에 렌더링된 이후 비동기로 처리되어야하는 부수적 효과들을 뜻 한다. useEffect는 component가 mount, unmonut, update 됐을 때 특정 작업을 처리할 수 있다. useEffect를 공부하기 전에 사전에 React component의 Lifecycle method 개념을 찾아보면 이해하기 편하다. 요약하면 리액트 컴포넌트가 새로 랜더링 된다면 특정 작업을 실행 시켜주는 기능이다. 2. 사용법 useEffect의 기본형태는 다음과 같다. useEffect(fu..

  Read More
• [React] Styled Components 사용법

  공부/React 2024. 2. 17. 00:46

  React에서는 다양한 방법으로 CSS를 적용할 수 있다 그 중에서는 Styled Components라는 방법도 있다. Styled Components 란? React에서 스타일을 작성하기 위한 CSS-in-JS라이브러리이다. 컴포넌트기반으로 스타일을 정의하고 관리가능하다. JavaScript / TypeScript를 사용하여 스타일을 동적으로 생성할 수 있다. 1. 설치 사용하기 위해서는 우선 라이브러리를 프로젝트에 먼저 설치해야한다. VSCORD 기준으로 터미널에 npm을 사전에 설치한 후 다음 명령어를 통해 설치한다. npm install styled-components 2. (예시) 사용방법 사용을 위해서는 설치한 패키지에서 우선 styled를 import를 해야한다. import styled f..

  Read More
• [React] React에서 Ajax & Ajax 사용법

  공부/React 2024. 2. 16. 00:45

  1. Ajax란 ? 서버에 새로고침없이 요청(비동기적으로)을 할 수 있게 도와주는 일종의 JS코드이다. 단순하게 말하면 서버랑 데이터를 주고 받기 위한 기술이다. 서버로 데이터를 주고받기위해서는 GET, POST 등 (메소드) 을 통해 요청가능하다. 2. 사용방법 React에서 Ajax를 사용하는 일반적인 방법으로는 두 가지가 있다. "fetch" API 또는 "axios" 같은 HTTP 클라이언트 라이브러리를 설치해서 사용할 수 있다. fetch API : HTTP를 구성하는 요청과 응답 등을 JavaScript로 접근 조각이 가능하게 해주는 매서드 axios : Promise 기반의 API를 제공하여 비동기식 HTTP 요청을 보내고 응답을 처리하는 JavaScript 라이브러리 파고들다보면 fetch..

  Read More