react

컴포넌트 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 { ..

목표 서버로부터 전송받은 데이터를 React에서 사용할 수 있는 방법을 익힌다. export, import 1) data.js let a = 10; let b = 100; let c = ['kim',20] let d = {name : 'kim', age : 20 } export {a,b,c,d} a, b 변수를 다른 스크립트문에서 사용할 수 있도록 export 해준다. 2) App.js import {a,b,c,d} from './data.js'; data.js에서 a,b,c,d 변수를 가져온다. 이후로 App.js 에서는 data.js에서 받아온 a,b,c,d 데이터를 사용할 수 있게 된다. JSON 형식의 데이터 읽기 1) 서버가 전송한 JSON let data=[ { id : 0, title : "..

목표 이미지 태그 사용법을 익힌다. URL 지정하는 법 1. CSS에서 url을 지정한다. 1) CSS .main-bg{ height: 400px; background-image: url('./img/apple.PNG'); background-size: cover; background-position: center; } 2) App.js 2. htm 태그 내에서 src 속성을 사용 import appleImagePath from './img/apple.PNG'; url 괄호 내부에 들어가는 경로를 입력해주기 위해 양단에 작음 따옴표와 덧셈 부호가 들어간다. 3. img 태그내 src 속성에 이미지 저장소 url 입력 이미지 경로 설정법 1. public 폴더에 이미지가 있는 경우 process.env.P..

목표 Bootstrap을 사용하여 기존에 만들어진 UI들을 사용해본다. Bootstrap 설정 과정 1. React Bootstrap 설치 npm install react-bootstrap bootstrap 프로젝트 폴더 터미널에 위 명령어를 입력해주면 설치가 가능하다. 단, 명령어 변경이 발생할 수 있으므로 아래 사이트에서 확인해 보는 것이 바람직하다. https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app 2. CSS 관련 Stylesheets import 1) App.js 에 im..