리액트 컴포넌트3 [ 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 ] 재사용가능한 Component 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.. 2021. 2. 11. [ 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. 이전 1 다음
