나는 VSCode 를 사용한다. 터미널에서 npm i prop-types 입력한다. npm i prop-types 좀 기다려준다. prop-types 는 내가 전달받은 prop 이 내가 원하는 prop 인지를 확인해 주는 역할을 한다. 잘 설치되었는지 확인해보자. package.json 을 보면 "dependencies" 에 prop-types 가 있는지를 확인할 수 있다. 정상적으로 설치된 것을 확인할 수 있다. 간단하게 사용해보자. 우선 import를 해줘야한다. import ProtoTypes from "prop-types"; import React from "react"; import PropTypes from "prop-types"; function Butter({name, img}){ retu..

전 React 포스팅에서 했던 코드를 다시 불러와보겠다. import React from "react"; function Butter({who}){ return( Do you know {who}? ) } function App() { return ( Halo! ); } export default App; 위 코드에서는, Butter 컴포넌트를 열심히 복사 해서 who 값을 다르게 넣었었다. 사실 위 코드도 그닥 효율적이라고 말할 수가 없다. 우리가 새로운 음식을 추가할 때마다 복붙을 해야하기 때문이다. 이번 포스팅에서는 웹사이트에 동적 데이터를 추가하는 방법을 다룰 예정이다. 1. 동적 데이터 추가하기 우리가 만드는 데이터는 이미 API에서 전달받았다고 가정하자. 나는 doYouKnow 라는 이름으로 이..

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/var var - JavaScript | MDN var문은 변수를 선언하고, 선택적으로 초기화할 수 있습니다. The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/ developer.mozilla.org MDN 내용을 알기 쉽게 정리해놓은 것임. var var 는 변수를 선언하고, 선택적으로 초기화 할 수 있다. 어떤 위치에 선언되..

1. 컴포넌트를 재사용해보자 import React from "react"; function Butter(){ return( Do you know me? ) } function App() { return ( Halo! ); } export default App; 만약 위와 같은 코드가 있다고 가정해보자. 현재 서버 상태는 이렇다. 그런데, 내가 Do you know 블라블라 ? 를 많이 출력하고 싶다. 한 1000개 정도? 그럼 저 App 안에 함수를 1000개 생성해야할까? 노놉. 컴포넌트를 재사용해보자. 먼저 해야할 것이 있다. import React from "react"; function Butter(){ return( Do you know me? ) } function App() { return..