react4 [ React ] ProtoTypes 설치하기 | ProtoTypes install 나는 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.. 2021. 2. 13. [ React ] 동적 컴포넌트 생성 | Each child in a list should have a unique "key" prop 에러 해결 전 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 라는 이름으로 이.. 2021. 2. 12. [ React ] What is the component & jsx? | How to create component 1. 컴포넌트 :: HTML 을 반환하는 함수. 기본적으로 들어있는 App.js 코드에도 이를 볼 수 있다. import React from "react"; function App() { return ( ); } export default App; 중앙에 들어있는 APP 이 바로 그 존재이다. 이것은 index.js 에서 컴포넌트로 활용된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( , document.getElementById('root') ); 바로 과 같은 형태로. React 는 component 를 사용해서 HTML 처럼 작성할 때 필요하다. 2. jsx .. 2021. 2. 11. [ React ] VSCode 로 React 시작하기 | Git 과 연동하기 본 포스팅은 노마드코더의 강의를 바탕으로 제작되었습니다. nomadcoders.co/react-fundamentals/lobby Watch Now - 노마드 코더 Nomad Coders nomadcoders.co 니꼴라스 선생님께 무한한 감사를 드리며 만수무강 하시길 바랍니다. 본 포스팅을 시작하기 전, node.js 와 npm 과 npx 가 설치되어 있어야합니다. 만약 설치가 되어있지 않으신 분들은, ffoorreeuunn.tistory.com/199 [ Node.js ] Node.js 설치하기 & npm 설치하기 & npx 설치하기 1. Node.js 설치하기 nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built o.. 2021. 2. 11. 이전 1 다음
