전체 글
-
[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..
-
[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..
-
[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..
-
[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..
-
[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..
-
[React] 오류 : Warning: The tag <test> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.공부/나를 힘들게하는 오류들 2024. 2. 14. 15:19
오류 설명이랑 똑같이 안에 있는 태그의 앞을 대문자로 적어주지 않아 발생한 오류이다. 컴포넌트는 무조건 앞 글자를 대문자로 입력해야하는데, 그렇지 않아서 발생한 오류였다. 따라서 와 같이 변경하여 해결하면된다.
-
[React] 리액트로 페이지 나누기 (React-Router-Dom)공부/React 2024. 2. 14. 15:12
1. 설명 React는 SPA(Single Page Application)이다. 따라서 리액트로 페이지를 나누는 순서는 컴포넌트를 생성하여 상세페이지 내용을 작성한다. 해당 페이지에 접속 시도시 기존페이지를 지우고 그 컴포넌트를 보여준다. 이 과정을 React Router Dom을 사용하면 간단하게 작성가능하다. => React Router Dom : 화면 전환을 지원하는 모듈 html의 경우 다른페이지를 작성하여 그 페이지(html)로 이동시키지만 React Router Dom을 쓰면 router로 웹사이트의 페이지를 구분할 수 있다. ( react-router : 내부를 완전히 교체해 다른 페이지를 보여주는 것 ) 2. 설치 1. 터미널에 설치 명령어 입력 npm i react-router-dom 2..
-
[React] input data 추가하기 & 글 삭제 버튼공부/React 2024. 2. 6. 18:40
출처 : 코딩애플 React 강의 과제 1. 유저가 입력한 데이터 추가, 글 삭제버튼 (응용 1. 빈 입력값 체크 / 응용 2. 좋아요 추가 / 응용3. 날짜 추가) e.target으로 받은 유저의 입력값을 in_data에 담아 useState(spread를 사용하여)로 logo 데이터에 추가시켰다. 삼항연산자를 이용해 유저 입력값(in_data)이 공백이 아닌 경우에만 실행되도록 했다. useState를 이용해 새로 만들어진 글에 좋아요 데이터를 하나 더 추가했다. 현재 날짜는 date함수를 통해 가져와서 발행일자에 입력했다. 삭제 버튼의 경우는 splice()함수를 통해 구현했다. 2. 작성한 코드 function App() { //데이터변수 let [logo,setLogo] = useState(["..