React/ReactJS로 영화 웹 서비스 만들기8 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. 2. 리액트로 클론 코딩 시작하기 create-react-app 이라는 보일러 플레이트로 리액트 개발을 시작해볼거다 먼저 리액트 앱을 만들어보자. movie_app_2020이라는 폴더가 생성될거다. yarn start를 입력하면 앱을 실행시킬수 있다. Ctrl + C 를 누르면 리액트 앱이 종료된다. 리액트는 우리가 작성하거나 수정한 프로젝트 폴더에 있는 코드를 자바스크립트를 이용하여 해석한다. 그리고 해석한 결과물을 index.html로 끼워 넣는다. 저 아이디가 root인 엘리먼트에 App 컴포넌트를 그린다고 생각하면 된다. 즉, App.js에서 작성한 코드를 index.html의 아이디가 root인 엘리먼트에 넣어주는거다. 리액트는 처음부터 모든 HTML을 그려넣지는 않기 때문에 빠르다. ※ 본 포스팅은 개인 공부 기록을 목적으로 .. 2020. 7. 25. 1. 영화 앱 React 클론코딩준비하기 노마드코더 www.youtube.com/playlist?list=PL7jH19IHhOLOFTVD4R8FeZWkwpVi8-9Fv 명령프롬프트에서 Node.js가 설치되어 있는지 확인하고 설치가 안되어 있다면 아래 링크로 들어가서 설치해준다. https://nodejs.org/en/ ※ 보통 버젼확인으로 프로그램 설치 유무를 확인한다고 한다. 학습자에게 리액트의 장점? 리액트는 자바스크립트로 작성되어 있고, 리액트를 배움으로써 자바스크립트 실력이 향상된다고 한다. 요즘 모던 자바스크립트도 같이 공부를 하고 있는데 리액트를 학습의 효율성이 더 높아질것으로 기대된다. ※ 본 포스팅은 개인 공부 기록을 목적으로 남긴 글이며 본 사실과 다른 부분이 있다면 과감하게 지적 부탁드립니다. 2020. 7. 24. 이전 1 2 다음
