import { motion, AnimatePresence } from "framer-motion"; ... 생략 ... {/* 🔽 아래에서 위로 올라오는 팝업 */} {isBottomOpen && ( 아래에서 위로 올라오는 팝업 setIsBottomOpen(false)}>닫기 )} {/* 🔼 위에서 아래로 내려오는 팝업 */} {isTopOpen && ( 위에서 아래로 내려오는 팝업 setIsTopOpen(fals..
🍦 useEffect useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있드록 하는 Hook이다. 덕분에 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게됐다. 🍰 기본형태 import { useEffect } from "react"; - import 필수! useEffect(function, deps) - function : 수행하고자 하는 작업 - deps : 배열 형태로 검사하고자하는 특정 값 또는 빈 배열을 넣는다. 1️⃣ 컴포넌트가 mount 됐을 때 useEffect(() => { console.log('마운트 될 때만 실행된다.'); }, []); deps에 [] 빈 배열을 넣게되면 마운트 될 때, 즉 실행 후 한번만 ..
토이 프로젝트를 진행하면서 회원가입 페이지를 만들고 있습니다 회원가입 정보가 모두 입력되면, 각 input box에 입력된 정보들을 서버로 보내야합니다. 리액트에서 input box의 value를 어떤식으로 다루면 편리할까 알아봅시다..💛 🥞 input Value 다루기 (state를 이용하여..) 먼저 저는 회원가입에 필요한 정보를 많이 두진 않았습니다! 미니 프로젝트니까 간단하게 아이디, 비밀번호, 비밀번호확인, 이름, 전화번호, 이메일, 주소 정도로 7개의 state가 필요합니다. 그래서 저는 이렇게 작성했습니다. 그리고 input값이 변경되면 위의 state 값이 자동으로 바뀌게 (저장되도록) 할겁니다. 각 input 필드에 name, onChange, value를 입력해줍니다. 그리고 handl..
axios를 사용하여 urlencoded 데이터 보내는 법을 알아보겠습니다. POST 테스트 할때는 너무 편한 postman을 이용해서 axios에서 urlencoded 데이터를 어떻게 보낼지 몰랐습니다. postman에선 그냥 이렇게 입력해주면 끝이죠... 먼저 qs, (querystring) 모듈이 필요합니다. 설치해줍니다. npm install qs 그 다음에 리액트 프로젝트 상단에 import해줍니다. (또는 require) import qs from 'qs' import axios from 'axios' axios에서 urlencoded 데이터 보내는 법 qs에서 제공하는 stringify를 사용하고, 헤더에 content-type을 추가해주면 됩니다. 예시코드) axios({ method: '..
select box를 만들때, 옵션이 많으면 내부에 이 많아지면서 길어지면 보기가 싫다.. 그래서 해결방안 import React, { useState, useRef } from "react"; const options = [ { value: "iron", name: "아이언"}, { value: "silver", name: "실버"}, { value: "gold", name: "골드"}, { value: "platinum", name: "플레티넘"}, { value: "diamond", name: "다이아몬드"}, { value: "master", name: "마스터"}, { value: "grandmaster", name: "그랜드마스터"}, { value: "challenger", name: "챌린..
리액트를 독학하기 시작하면서 Redux도 알게돼서 스스로 이해하고 알아본 내용을 작성해봅니다. 공홈을 통해서 공부했고, 영어 번역을 제대로 하지 않아서 제가 알고있는 내용이 정확하지 않을 수 있으므로 공홈을 꼭 참고하시길 바랍니다. Counter 예제를 만들어보자 먼저 완성된 화면부터 보자면, 위와 같고, +를 누르면 1 증가, -를 누르면 1 감소 Add Amount : 왼쪽박스에 적힌 수 만큼 증가 Add Async : 왼쪽박스에 적힌 수 만큼 Async 증가 (사용자가 지정한 Async, 여기서는 setTimeout 1000.) Redux는 새로고침을 해도 변한 값이 유지가 된다는 장점이 있다. Application Content /src index.js : app 시작점 App.js : React..
에러 export 'Switch' (imported as 'Switch') was not found in 'react-router-dom' react-router-dom이 버전 6로 업그레이드되면서, Switch를 더이상 지원하지 않는다. Switch -> routes로, component -> element로 변경됨. 기존 위와 같이 쓰던 것을 아래와 같이 쓰면 된다.
Redux의 3가지 원칙 1. 하나의 애플리케이션 안에는 하나의 스토어만 사용하자. 특정 업데이트가 빈번하게 일어나거나, 애플리케이션 특정 부분을 분리시키게 되면, 여러 개의 스토어를 사용할 수 있다, 하지만, Redux는 하나의 애플리케이션에서 여러 개의 스토어 사용을 권장하지 않는 이유는 개발 도구를 활용하지 못하게 되어 디버깅이 어려워지기 때문이다. 그러니 하나의 스토어만 사용하여 디버깅을 용이하게 하고, 서버와의 직렬화를 통해 클라이언트에서 데이터를 쉽게 받아올 수 있도록 한다. 2. state는 읽기 전용이다. Redux는 state를 변경할 때, 기존 값은 건드리지 않고, action을 일으켜 새로운 state를 생성하여 업데이트해주는 방식이다. 이것은 Redux 고유의 불변성을 지키고, st..
토이 프로젝트에서 몬스터 생성과 이동을 맡았다. 몬스터를 만들면서 내가 개인적으로 function과 class, props와 state에 대해 어떻게 이해했는지 작성해보려고 한다. 몬스터에게 필요한것은 위치, 크기, 속도, 이동방향, 이미지 등이 있을 것이다. 먼저 MonsterInstance Class를 생성했다. 그 안에서 몬스터 정보를 받도록 했다.. // Monster.js class MonsterInstance extends React.Component { constructor(props) { super(props); this.state = { position: props.position, scale: props.scale, visible: true, img: props.img, dir: 1, ..
React 컴포넌트 안의 state와 생명주기에 대해서 알아보자. 컴포넌트에 대한 자세한 내용은 👉 https://ko.reactjs.org/docs/react-component.html 🍳리액트의 생명주기 컴포넌트는 생성(mounting) -> 업데이트(updating) -> 제거(unmounting)의 생명주기를 갖는다. 리액트 클래스 컴포넌트는 라이프 사이클 메서드를 사용하고, 함수형 컴포넌트는 Hook을 사용한다. 1.1 Class Component 생명주기 마운트 (mount) 컴포넌트가 생성 될때 발생하는 생명주기들을 알아보자. constructor 컴포넌트 생성자 메서드, 컴포넌트가 생성되면 가장 먼저 실행되는 메서드 this.props, this.state에 접근가능하고 리액트 요소를 반환..