전체 글155 Input 상태 관리하기 import React, { useState } from 'react'; function InputSample(){ const [text, setText] = useState(''); const onChange = (e) => { // 이벤트 객체가 의미하는 것은 만약 이벤트가 수정이 발생했을 때 e 파라미터로 받는다 setText(e.target.value); // target이 의미하는것은 e(이벤트)가 발생한 DOM의 정보를 가지고 있다. } const onReset = () => { setText(''); } return( 초기화 값: {text} ); } export default InputSample; input에 onChange라는 속성을 추가한 다음에, onChange라는 함수를 연결한다 .. 2020. 7. 19. 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. 이전 1 ··· 35 36 37 38 39 다음