Language76 컴포넌트 설명, setState https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818 2020. 7. 18. prototype을 통해 객체 타입을 검사하기 npm i prop-types 콘솔창 입력을 통하여 설치 에 "prop-types": "^version_num"을 통해 확인 const foodILike = [ { id: 1, name: "Kimchi", image: "http://aeriskitchen.com/wp-content/uploads/2008/09/kimchi_bokkeumbap_02-.jpg", rating: 5 } ]; name,picture:string, rating: number 1) Food라는 객체가 있다. name,picture:string, rating: number 로 받기 위해 function Food({ name, picture, rating }) { return ( I like {name} {rating} / 5.0 );.. 2020. 7. 17. Children props 전달하기 1) 태그와 태그사이에 넣는 내용 전달하기 import React from 'react'; import Hello from './Hello'; import Wrapper from './Wrapper'; function App() { return ( {/* hello 컴포넌트에 react라는 name을 작성, 그다음 Hello 컴포넌트를 작성 */} ) } export default App; 위와 같이, Wrapper라는 태그사이에 내용을 넣고 싶을 때 사용, 2) Wrapper를 통해 태그에 적용할 스타일을 만들 수 있다. import React from 'react'; function Wrapper({ children }){ const style = { border: '2px solid black', .. 2020. 7. 17. props를 통해 값 전달하기 props의 의미: property의 줄임말 1) Hello 라는 컴포넌트에 값을 주기 위해 값을 작성 //APP.js import React from 'react'; import Hello from './Hello'; function App() { return ( {/* hello 컴포넌트에 react라는 name을 작성, 그다음 Hello 컴포넌트를 작성 */} ) } 2) name 컴포넌트에서 작성한 값들을 사용하고 싶다면 함수에서 props라는 값을 가져온다. props라는 parameter는 넣어준 값들이 객체 형태로 들어가있다 //Hello.js import React from 'react'; function Hello(props){ // name이라는 값을 사용하고 싶다면 함수에서 props.. 2020. 7. 17. 이전 1 ··· 16 17 18 19 다음