공부
-
[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(["..
-
[React] 날짜 데이터 사용하기공부/React 2024. 2. 6. 17:15
현재 날짜 데이터 가져와 활용하는 방법은 다음과 같다. 1. 함수를 선언하고 날짜 형식을 원하는대로 맞춘다. //함수선언 const today = new Date(); const date_data = `${today.getFullYear()}년 ${'0' + (today.getMonth() + 1).slice(-2)}월 ${'0' + today.getDate().slice(-2)}일`; 2. 함수 사용 import React from 'react'; //현재 날짜를 가져온다. const date_data = new Date(); //형식을 지정한다. const date_data = `${today.getFullYear()}년 ${'0' + (today.getMonth() + 1).slice(-2)}월 $..
-
[React] 버튼 클릭 이벤트로 버튼을 구분해서 값 변경하기공부/React 2024. 2. 4. 01:37
1. 기능 구현 map 함수로 생성한 여러 버튼을 클릭 시 해당 버튼에 할당된 값만 증가하도록 구현한다. 2. 설명 usestate와 map함수를 이용하여 구현했다. n번째 버튼 클릭 시 현재 n에 해당하는 값을 map함수의 증가하는 i값을 이용하여 count_test 함수에 전달 n_count에 chic_count 데이터를 복사 후 n_count의 N 번째 데이터에 1을 더한다. setchic을 통해 변경된 데이터로 수정하면 해당 버튼의 데이터가 증가한다. 3. 작성 코드 import logo from './logo.svg'; import './App.css'; import { useState } from 'react'; function App() { let [logo,setLogo] = useStat..