개발블로그

Data를 가져와서 사용할때 쓰인다. async : 무언가 실행이 완료 되길 기다렸다 다음 코드를 진행 하고 싶을때 사용한다 : 얘는 기다려야만 하는 함수! 뭘 기다려? await를! await는 axios가 끝나기를 기다렸다가 그 뒤에 코드를 진행한다. 아래 예시와같은 경우 영화 데이터를 get 해올때까지 기다린다. import React from "react"; import axios from "axios"; import Movie from "./Movie"; class App extends React.Component { state = { isLoading: true, movies: [] }; // async : 비동기 -> 너는 기다려야만 하는 함수 ( 기다려야 해! ) getMovies = as..

state란? component에서 변하는 데이터를 저장하는 Object( 바꿀수 있는 데이터 ) import React from "react" import PropTypes from "prop-types" /* class는 function이 아니기 때문에 return 값이 존재하지 않음 대신 React.Component가 포함하고 있는 render 사용 */ class App extends React.Component { //react는 자동적으로 모든 class의 render를 실행한다. //component가 render 되기 전에 호출되는 함수 : Mounting -> constructor() //component가 render 된 후 호출되는 함수 : Mounting -> componentDid..

유효성 검사 및 타입 확인 패키지 설치 : npm i prop-types const foodLike = [ { id:1, name: "Home Alone", image: "https://upload.wikimedia.org/wikipedia/ko/3/31/%EB%82%98_%ED%99%80%EB%A1%9C_%EC%A7%91%EC%97%90_%ED%8F%AC%EC%8A%A4%ED%84%B0.jpg", rating: 5 }, { id:2, name: "Harry Potter", image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2F20151224_170%2Fineedu0810_1450929838016sVnO8_JPE..

※ 가끔 표출에는 문제가 없지만 아래와 같은 경고창이 발생 할 수 있다. : id 지정 후 key 값에 적용해 줘야 함! import React from "react" // id 지정 후 key값에 적용 const foodLike = [ { id:1, name: "kimchi", image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNzAzMjFfMTY1%2FMDAxNDkwMDgzNTAxOTAy.RiKsHEGpvqVbqgygh-9kUAQwra4HJL_nbl7vf4AqHjUg.ne42Ah_0CB4RO9aIi3QpPg_FlOkRWQZSAJZNm4kjzW8g.JPEG.mia5472%2F12627997_16759..

다중 Components 의 props 사용법 import React from "react" function Food({fav}) { return I love {fav}; } /* 이런 방식도 가능 function Food(props) { return I love {props.fav}; } */ function App() { return ( Hello FFF!! /*이런식이면 props 사용*/ ); } export default App; 위에 예제처럼 Food component를 복붙 하지 않기 위해선 함수 생성 후 동적 데이터 생성 import React from "react" function Food({ name, picture }) { return ( I love {name} ); } //함수 추..

1. react 시작( 설정 ) # cmd 에서 실행 npx create-react-app [movie_app] 2. vscode 실행 생성 후 cmd에서 code movie_app 입력하면 자동으로 vscode가 실행됨 vscode에서 npm start 실행 3. react 코드 작성 react는 먼저 빈 html을 업로드 하고 거기에 우리가 작성한 component를 집어넣음 하나의 react application에서는 하나의 component만 rendering 가능 (아래 예시)