React

목표 Local/Session Storage 사용법을 익히고, Object/Array와 JSON 간 쌍방 형식 변환을 수행한다. Local Storage : 반영구적으로 데이터를 저장함 Session Storage : 휘발성 저장소, 새로고침하거나 브라우져 껏다 켜면 저장시켜놓은 데이터가 사라짐 위와 같이 개발자 모드(F12)에서 Local Storage에 데이터를 저장하고 삭제할 수 있다. Session Storage에 저장하고 싶다면, 위의 localStorate 대신 sesseionStorage로 작성한다. 코드에서 Object/Array 데이터를 JSON 형식으로 Local Storage에 저장하기 function App() { let obj = {name : 'kim'} localStorage...

Redux란? props 없이 state를 공유할 수 있도록 도와주는 라이브러리다. 하나의 js 파일에 state를 보관하고, 모든 컴포넌트들이 state를 직접 꺼내쓸 수 있다. Redux 설치 npm install @reduxjs/toolkit react-redux 터미널에 위 명령어를 실행시킨다. 주의사항 package.json 파일에서 react와 react-dom이 18.1.0 버전 이상이어야 문제없이 설치가 가능하다. 만약 보다 낮으면, 직접 파일 수정하면 된다. Redux 파일 생성 import { configureStore } from "@reduxjs/toolkit"; export default configureStore({ reducer: { } }) state를 보관할 js 파일을 만..

목표 컴포넌트가 전환될 때 또는 특정 태그에 애니메이션을 적용시켜본다. css설정 .start{ opacity:0; } .end{ opacity:1; transition:opacity 0.5s; } opacity는 투명도, transition은 0.5초에 걸쳐 서서히 변하도록 하는 것을 명시한 것이다. 위처럼 애니메이션 동작 전 스타일을 담을 className과 애니메이션 동작 후 스타일을 담을 className을 별도로 만든다. 그리고 transtion 속성을 추가해야한다. 태그에 애니메이션 적용 function TabContent({tab}){ let [fade,setFade]=useState('') useEffect(()=>{ setTimeout(()=>{setFade('end')},100) ret..

npm start 가 정상적으로 동작하지 않으면서 위와 같은 오류 메시지를 남긴다. 이는 이더넷 케이블 구성에서 IP주소가 비공개라 값을 가지고 오지 못하기 때문에 발생하는 문제였다. 해결방법은 2가지다. 1. 유선랜을 뽑고 유선랜을 사용한다. 2. React 프로젝트 폴더에 .env 파일 생성한다. DANGEROUSLY_DISABLE_HOST_CHECK=true 생성하면 잘 동작한다.

에러코드 Failed to compile. Module not found: Can't resolve 'react-router-dom' (파일경로) App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 import해서 사용하려고 하는데 계속해서 위와 같은 에러가 발생했다. 가져올 컴포넌트가 저장된 자바스크립트 파일이 다른 폴더에 있어 라우팅이 안 되어 발생하는 문제였다. npm install react-router-dom --save react-router-dom은 브라우저에서 사용되는 리액트 라우터로 위 명령어 사용하여 설치하면 문제가 해결된다.

목표 서버에 새로고침 없이 데이터를 주고 받을 수 있는 브라우저 기능을 ajax라고 한다. ajax로 get/post를 요청하는 방법 중 axios 라이브러리를 통한 요청방법에 대해 알아본다. 기본설정 및 사용법 1. 라이브러리 설치 npm install axios 터미널에서 프로젝트 폴더 경로로 이동한 후, 위 명령어를 입력해 라이브러리를 설치한다. 2. axios import 및 기본 사용법 import axios from 'axios' function App(){ return ( { axios.get('서버URL/데이터이름.json') .then((result)=>{ console.log(success) }) .catch(()=>{ console.log('fail') }) }}>버튼 ) } axio..

컴포넌트 Lifecycle 컴포넌트는 위 그림에서처럼 생성될 떄, 업데이트 할 때, 제거할 때 3가지로 Lifecycle이 나뉜다. 과거 클래스로 컴포넌트를 만들었을 때는 아래와 같은 방법으로 lifecycle마다 다른 동작을 수행토록 했다. class Modal extends React.Component { componentDidMount(){ //Detail2 컴포넌트가 로드되고나서 실행할 코드 } componentDidUpdate(){ //Detail2 컴포넌트가 업데이트 되고나서 실행할 코드 } componentWillUnmount(){ //Detail2 컴포넌트가 삭제되기전에 실행할 코드 } } 하지만 현재는 class보다 function올 통해 컴포넌트를 생성하기 떄문에 function에서의 ..

목표 CSS를 사용하지 않고도 자바스크립트 파일 내부에서 스타일을 적용시켜본다. 기본설정 1. 터미널을 연 뒤 프로젝트 폴더 경로로 이동하고 아래 명령어를 입력한다. npm install styled-components 2. 사용할 컴포넌트 파일 위에 styled import import styled from 'styled-components' 사용 방법 1. styled.적용시킬태그`` let YellowBtn = styled.button` background : ${props => props.bg}; color : ${props => props.bg =='blue'?'white':'black'}; padding : 10px; ` let Box = styled.div` background : grey;..

find, findIndex, filter 함수 let data=[ { id : 2, title : "iPhone 14 Pro", content : "Born in States", price : 12000000 }, { id : 1, title : "Apple watch", content : "Born in Seoul", price : 11000000 }, { id : 0, title : "iPad", content : "Born in the States", price : 13000000 } ] 라는 데이터가 있을 때, 각 함수를 적용시켜보겠다. 1. find 특정 조건에 맞는 값들 중 가장 먼저 나오는 값을 반환해준다. var returnValue = data.find(function(val){ ret..

목표 URL로 부터 파라미터 값을 받으면, 파라미터에 따라 대응되는 페이지를 하나의 라우터로 다중 생성하고 파라미터에 따라 각자 다른 페이지를 출력하도록 한다. 라우터로 다중 페이지 만들기 '/:id' 를 붙임으로서 /detail 페이지 뒤에 어떤 파라미터를 입력했을 때, 이 URL에 따라 기존에 작성해둔 페이지가 없더라도 404error가 발생하지않고 페이지가 정상적으로 출력된다. 예로 localhost:3000/detail/0 , localhost:3000/detail/1 , localhost:3000/detail/2, ... localhost:3000/detail/999999 모두 기존에 생성해둔 페이지가 없더라도 404 error 가 발생하지 않고 페이지가 출력된다.(물론 해당 페이지에서 파라미터..