react

다시 react 공부할려고 node.js 깔고 시작할려고 하니까npx create-react-app name 해서 설치할려니 아래 오류가 뜬다You are running create-react-app 4.0.3, which is behind the latest rele

state는 1.변수 대신 쓰는 데이터 저장공간 state에 데이터를 저장하는 이유는 => 웹이 App처럼 동작하게 만들고 싶어서useState()를 이용해서 만들어야함문자, 숫자, array, object 다 저장가능 import React, { useSta

html을 한단어로 줄여서 쓸 수 있는 방법리액트의 Component문법반복적으로 나오는 HTML덩어리들을 Component로 만들면 좋음자주변경되는 HTML UI들 ( 재랜더링이 되기 때문에 성능적으로 좋음 )위의 예시처럼 function Modal()이라는 것을

처음에 state를 이용해서 modal의 기본값을 false로 주고 (꺼져있는 상태)그리고 Modal 컴포넌트를 한개 생성한다.그후에 JSX문법에서는 if를 쓸 수 없기 때문에 삼항연산자를 이용해 if문을 만들어준다?는 true일 때 , : 는 false 일 때if문을

반복문 쓰는 법 JSX문법으론 중괄호 내에 for 반복문 못넣는다 // 함수나 변수만 가능\*밑에 쓸 수 있는 방법 설명있음.그래서 여러가지 방법중에 하나인 .map( )함수를 쓴다.어떨때 쓰느냐! array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을때예를 들어이

서로 다른 컴포넌트는 state를 함부로 사용할 수 없어서 부모컴포넌트가 자식컴포넌트에게 props로 전송을 해줘야 사용이 가능 ! 사용하는 법1.<자식 컴포넌트 작명={state명}/>{state명}여기 안에는 전송하고 싶은 데이터를 입력변수명은 {}안에 작성

state에 글제목 '남자코트추천', '강남우동맛집', '파이썬독학' 저장누른제목 useState(0) 저장 (몇번째 제목인지 알기 위해)map 반복문을 통해서 반복되는 html 제작 props전달하기 위해서 전송을 원하는 곳에 작명={데이터이름} 작성글제목과 몇번째

input에 입력한 데이터 저장하기 ! onChange는 이벤트 핸들러 입력한 값이 바뀌면 이벤트가 발생한다 e.target.value e는 이벤트가 동작하는 곳이라고 생각하면됨value는 input에 입력된 값이렇게 state를 만들어서 input에 입력된 값 저장하

https://react-bootstrap.netlify.app/ 사이트는 여기 들어가면 된다 ! react 부트스트랩 사용법 첫 페이지에서 Get started를 누르면 다음과 같은 창이 나온다 터미널을 켜서 그대로 입력해주자설치가 끝났으면 public폴더

데이터가 많은 파일을 import / export 해서 state에 저장하기 ! 한개의 변수만 import / export 하는법 (파일위치 data.js)export 하는법 : export default 변수명export default라는 키워드는 한번만 사용이

여러가지 페이지로 나눌 수 있음npm install react-router-dom@5.2.0index.js파일에 추가import { BrowserRouter } from 'react-router-dom';HashRouter vs BrowserRouter 주소창에 Has

Link, Switch, SwitchuseHistory 훅모든 url 방문기록을 담은 objectimport { useHistory } from 'react-router-dom';history.goBack() 은 현재페이지에서 전의 url로 돌아가게 하는 기능.push

컴포넌트 파일이 많아지면 css 작성할 때 고민이 생김...( 한 개의 css파일에 모든 컴포넌트의 스타일 작성은 ...ㅠㅠ)그래서 styled-component 라는 라이브러리 사용 ~ 터미널에 yarn add styled-components 입력그 후에는 impor

컴포넌트가 mount 되었을 때 또는, 컴포넌트가 update(재랜더링) 될 때특정 코드를 실행할 수 있음useEffect 여러개 사용가능 위에서부터 순차적으로 작동 useEffect(,state1,state2)\[]안에 특정 state를 적으면 그 state가 변경이

서버에 새로고침없이 요청을 할 수 있게 도와줌 요청에는 여러종류가 있다GET요청 : 주소창에 URL을 적는 요청특정페이지나 자료읽기 POST 요청서버로 중요정보전달로그인 할 때등등요청한 자료가 JSON이면 axios가 Object자료형으로 바꿔준다.JS에서 쓰는 fet

context 하위컴포넌트들이 props 없이도 부모의 값을 사용가능context 만들기 ! 1\. let 변위변수명 = React.createContext()로 범위생성 - 같은 변수값을 공유할 범위 생성 \*다른 파일에 값을 공유하고 싶을 때는 export let