컴포넌트2 4. 리액트 컴포넌트 만들기 map() 함수를 이용하면 여러 개의 컴포넌트를 쉽게 만들 수 있다. 현재 이 코드는 효율적이지 않다. 새 음식을 추가할 때마다 를 복사해야 하므로. 서버에서 넘어온 데이터를 저장할 수 있도록 foodLike라는 빈 배열을 만들거다. 저 배열안에 서버에서 데이터가 넘어온다고 가정하고 음식속성들을 입력할거다. const foodLike = [ { name: 'Kimchi', image: 'https://cdn.pixabay.com/photo/2020/01/01/00/15/one-address-based-4732816_960_720.jpg', }, { name: 'Samgyeopsal', image: 'https://cdn.pixabay.com/photo/2016/04/05/09/17/pork-1308988.. 2020. 7. 31. 3. 리액트 기초 개념 알아보기 컴포넌트, JSX, props 이 3가지 개념을 꼭 알아야 리액트 앱을 잘 만들 수 있다. App()함수의 반환값이 많아지면 소괄호로 감싸야된다. App 컴포넌트를 임포트해서 사용한것을 볼 수 있다. ReactDOM.render() 함수의 첫 번째 인자로 전달하면 App 컴포넌트가 반환하는 것들을 화면에 그릴 수 있다. 두 번째 인자에는 컴포넌트가 그려질 위치를 전달하면 된다. Potato 컴포넌트를 만들어보자. 작성할 때 중요한 규칙은 이름은 대문자로 시작해야된다. 그리고 컴포넌트가 반환할 값은 JSX로 작성한다. export default Potato;를 추가하면 다른 파일에서 Potato 컴포넌트를 사용할 수 있다. App 컴포넌트가 반환할 값으로 를 추가해보자. 리액트가 를 해석해서 I love .. 2020. 7. 26. 이전 1 다음
