F.E/React
[React] useState 사용하기.
useState useState는 함수형 컴포넌트에서 상태를 관리할 수 있게 해주는 React Hook이다. useState는 react로부터 import를 하여 사용할 수 있다. const [상태, 상태변경 함수] = useState(초기값)의 형태로 작성을 하게 된다. import {useState} from "react" const [item, setItem] = useState() const [상태, 상태변경 함수] = useState(초기값) useState 비동기 처리 useState의 setState가 비동기로 작동하기에, 가끔 문제가 있을 수도 있다. 그 때는 useState setState를 함수를 이용한다. const [item, setItem] = useState() // 기존 set..
[React] Vite를 이용하여 React 프로젝트 만들기.
Vite 공식 사이트에 좀 더 자세한 설명이 있습니다. Vite Vite 차세대 프런트엔드 개발 툴 당신이 원했던 개발 환경을 시작해보세요. vitejs-kr.github.io NPM을 이용한 Vite Project 생성하기. vite는 14.18.0이상의 Node JS가 필요하다. npm create vite@latest 위의 명령어를 입력하면, 프로젝트 이름, 패키지 이름과 어떤 프레임 워크를 사용할 지 선택하면 된다. 설치가 끝나면 생성한 폴더로 들어가, 필요한 모듈을 설치한다. npm install # npm install만 입력하면 package.json 기준으로 적힌 모듈을 설치한다. 폴더 구조는 React와 비슷하지만 JSX 확장자를 사용한다는 차이가 있다. vite React 실행 npm ..
[React] axios에 대해서 알아보자!
Axios란? Axios란 브라우저, Node JS를 위한 HTTP 비동기 통신 라이브러리다. Promise 기반이며, async, awit 사용이 가능하며, JavaScript의 내장 라이브러리인 fetch와 다르게 설치를 통해서 사용이 가능하며, 구버전의 브라우저와 호환이 되기에, 데이터를 JSON 형태로 자동 변환할 수 있다. Axios 사용하기. npm 혹은 yarn을 이용하여 axios를 설치한다. #Use npm npm install axios #Use Yarn yarn add axios 설치 후엔 사용할 파일에 적용해준다. //JS ES6의 import 이용 import axios from "axios" Axios의 기본적인 사용 방법은 아래와 같다. //Axios GET [1] axios(..
[React] useParams를 이용하여, 게시글 리스트와 조회 하기.(index, show)
해당 게시글은 Nomad Coder님의 강의를 보고 작성한 게시글 입니다. 해당 강의에 있는 영화 API를 사용 합니다. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" import App from "./App" const root = ReactDOM.createRoot(document.getElementById("root")) root.render( ) src/App.js //App.js import { Route, Routes } from "react-router-dom"; import Detail f..
[React] react-router-dom 사용하기
01. react-router-dom 설치하기 npm 혹은 yarn 등의 패키지 모듈을 이용하여 react-router-dom 모듈을 설치한다. #npm npm install react-router-dom #yarn yarn add react-router-dom 02. BrowserRouter react-router-dom에서 라우터를 사용하기 위해서는 BrowserRouter 기능을 사용해야한다. index.js의 Tag를 아래와 같이 감싸주도록 하자. src/index.js //index.js import React from "react" import ReactDOM from "react-dom/client" import { BrowserRouter } from "react-router-dom" im..
[React] Map을 이용하여 To do List
사용 기능 - Map - useState //App.js import { useState } from "react" function App() { //input 입력 값 관리 const [toDo, setToDo] = useState("") //To do List 상태 관리 const [toDos, setToDos] = useState([]) //BtnClick Event const onSubmit = (e) => { e.preventDefault() //input 입력 값이 빈 값이면 다시 돌려보냄 if (toDo === "") { return } //입력 값을 현재 배열과 더해 새로운 배열을 생성 setToDos((current) => [...current, toDo]) //입력 값 초기화 setTo..
[React] useEffect 사용 방법
useEffect는 컴포넌트가 빌드 되었을 때, 업데이트 될 때 마다 실행하게 되는 훅 입니다. export default function Count () { const [count, setCount] = useState() console.log("Count On") return setCount((current) => current + 1}>{count} } 위와 같은 코드를 작성하게 되면, count의 상태가 변경될 때 마다 React는 컴포넌트를 refresh하기 때문에, console.log("Count On") 부분이 계속 찍히게 됩니다. 하지만 저희는 해당 컴포넌트가 빌드 되었을 때 한 번만 실행하고 싶기에 useEffect를 사용하게 됩니다. import { useEffect } from 'r..
[React] 컴포넌트의 타입 관리, prop-types
React props의 타입 문제 React는 props에 매개 변수를 넘길 때 타입 검사를 하지 않는다. 나는 Number 자료형으로 넘겨 받고 싶지만, 만약 String이 넘겨와도 문제가 되지 않는다 HTML 삽입 미리보기할 수 없는 소스 const Age = (props) => { return {props.age} } const App = () => { return( ) } 위와 같은 경우가 생기기에, 좀 더 타입을 명확히 해주기 위해서 PropsTypes 기능을 사용한다. //prop-types 모듈을 설치한다. npm install prop-types Proptypes 사용 방법 이제 을 사용하게 되면 타입이 맞지 않아 문제가 된다. const Age = (props) => { return {p..
[React] 함수형 컴포넌트에서 props 사용하기.
props란? 컴포넌트를 빌드할 때, 컴포넌트를 생성하는 함수의 매개 변수로 전달이 가능한 기능 아래의 코드는 input tag의 상태를 useState로 관리하여 그 값을 Btn 컴포넌트 props에 넘겨주는 코드 입니다. HTML 삽입 미리보기할 수 없는 소스 props에 넘길 수 있는 값 props에는 일반적으로 데이터를 넘기지만, 함수 등 다양한 값을 넘길 수 있다. const Test = ({name, click}) => { return( {name} ) } const App = () => { const onClick = () => { window.alert("Click Success") } return( ) }