React/코딩애플 강의

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..

목표 서버에 새로고침 없이 데이터를 주고 받을 수 있는 브라우저 기능을 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 가 발생하지 않고 페이지가 출력된다.(물론 해당 페이지에서 파라미터..

목표 리액트 라우터의 기능들 중 navigate, nested routes, outlet 사용법을 익힌다. 기본 설정 import {Routes, Route, Link, useNavigate, Outlet} from 'react-router-dom' App.js 상단에 위 내용을 import한다. 페이지 이동기능 useNavigate {navigate('/')}}>Home {navigate('/detail')}}>Detail {navigate(-1)}}>Back / 는 홈으로 이동, -1은 이전 페이지로 이동이다. 만약 파라미터로 2가 들어간다면 다음 2 페이지로 이동을 의미한다. 404 페이지 만들기 Route 태그들 중 가장 밑에 사용해야 하는 태그이다. 윗 태그들 중 알맞은 url이 없는 주소를 사..

목표 App.js에서 다른 자바스크립트 파일에 있는 컴포넌트를 가져온다. Detail.js 컴포넌트 → App.js 이동 과정 1. Detail.js 컴포넌트 export function DetailCard(){ return( 상세내용 출력 ) } export default DetailCard; 2. App.js에서 Detail.js import import DetailCard from './Detail' 뒤의 경로에 특별한 확장자를 입력하지 않으면 '.js'로 자동인식한다. 한 파일에서 여러 컴포넌트를 사용하고 싶은 경우 1) Detail.js function DetailCard(){ return( 상세내용 출력 ) } fuction BriefCard(){ return( 간략내용 출력 ) } expor..

목표 기존 자바스크립트 방식에서는 페이지를 나눌 때, html 파일을 만들어서 상세페이지 내용을 채우고 사용자가 url로 접속하면 현재 페이지와 다른 html 파일을 전송해줬다. 하지만 React에서는 index.html 하나 페이지만을 한다. 다른 페이지로 이동하는 것처럼 보일 수 있지만, 기능에 따라 보이는 컴포넌트를 교체해준 것 뿐이다. 이 때, 이 컴포넌트 교체 기능을 도와주는 라우팅 라이브러리인 react-router-dom 라이브러리 사용법에 대해 공부해보겠다. 라이브러리 사용을 위한 설정 1. 라이브러리 설치 npm install react-router-dom@6 터미널에서 프로젝트 폴더로 이동한 후 위 명령을 실행하여 라이브러리를 설치한다. 2. index.js 세팅 변경 import { ..