Language/React25 useState를 통해 컴포넌트에서 바뀌는 값 관리하기, 화살표함수 import React, { useState } from 'react'; function Counter(){ const [number, setNumber] = useState(0); // 비구조화 할당을 통해 number라는 상태를 만들텐데 상태를 파라미터값: 0으로 하겠다, setnumber는 상태를 바꿔주겠다 const onIncrease = () => { setNumber(prevNumber => prevNumber + 1); } const onDecrease = () => { setNumber(number - 1); } return( {number} +1 +1 ) } export default Counter; 1) import 부분에 useState 구문 추가 const [ number, setN.. 2020. 7. 19. 컴포넌트 설명, 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. 이전 1 ··· 3 4 5 6 7 다음