반응형 Project/REACT23 11 - state와 클래스형 컴포넌트(1) 1. state로 숫자 증감 기능 만들기 state는 동적 데이터를 다룰 때 사용한다. state는 클래스형 컴포넌트에서 사용가능 - 클래스형 컴포넌트 작성하기 App.js의 컴포넌트를 모두 지운다. import React from 'react'; export default App; 다음처럼 코드를 작성한다. import React from 'react'; class App extends React.Component { } export default App; 핵심은 App 클래스가 React.Component 클래스를 상속 받도록 extends React.Component 를 붙인다. 이것이 클래스형 컴포넌트의 기본 틀이다. 중요한 것은 클래스형 컴포넌트가 되려면 App 클래스가 리액트가 제공하는 Com.. 2020. 12. 17. 10 - 발전된 컴포넌트 만들기(2) 음식 앱 만지고 고치기 음식 앱에 prop-types 도입하기 1. 음식 앱 만지고 고치기 코드블럭처럼 코드를 수정해준다. function App() { return ( {foodLike.map(dish => ( ))} ); } =========================================== // 다음 처럼 변경한다. function App() { return ( {foodLike.map(renderFood)} ); } - renderFood() 함수를 정의한다. 앞선 코드 위에 renderFood() 함수를 정의 해준다. function renderFood(dish) { return ; } function App() { return ( {foodLike.map(renderFood)} );.. 2020. 12. 10. 9 - 발전된 컴포넌트 만들기(1) 비슷한 컴포넌트 여러 개 만들기 map() 함수로 컴포넌트 많이 만들기 1. 비슷한 컴포넌트 여래 개 만들기 App.js 파일을 열어서 코드가 효율적인지 확인해본다. import React from 'react'; function Food({ fav }) { return I like {fav}; } function App() { return ( Hello ); } export default App; 해당 코드는 효율적이지 않다. 음식 추가할 때 마다 를 복사 해줘야 하기 때문이다. 음식 데이터 받아 출력할 경우에 음식 데이터 개수를 알 수 없으면 더 문제가 된다. 앞서 서버에서 데이터 받아 오는 방법을 알아본다. - 음식 데이터 만들기 1. 서버에서 넘어온 데이터를 저장할 수 있게 foodLike 변수를.. 2020. 12. 10. 8 - 리액트 기초 개념: props props는 컴포넌트에서 컴포넌트로 전달하는 데이터를 말한다. (매개변수와 비슷) props를 사용하면 컴포넌트를 효율적으로 재사용 할 수 있다. 1. 컴포넌트 여러 개 사용해 보기 영화 앱에 목록을 컴포넌트로 표현한다고 해본다. Potato 컴포넌트의 이름을 Movie로 바꾼다. import React from 'react'; function Movie() { return I like potato; } function App() { return ( Hello ); } export default App; 두 번째 줄의 function 이름을 Movie로 바꾸고 아홉 번째 줄의 를 로 바꿈 Movie 컴포넌트 1개가 영화 목록 1개라고 가정해보자 를 20개 복사해서 붙여넣는다고 해보면 굉장히 비효율적이다... 2020. 12. 8. 이전 1 2 3 4 5 6 다음 반응형
