ReactJS 썸네일형 리스트형 ReactJS - Lists with .map | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 저번 포스팅에서 만들어 본 영화 리스트 코드(아래)는 효율적이지 않다.리스트가 같은 비슷한 형식의 코드의 복사-붙여 넣기 형태로 되어있기 때문.리스트가 많아지면 곤란해질 수 있다.API에서 긁어온 엄청난 양의 영화정보를 불러오고 싶을 때, 어떻게 해야 할까. 이를 위해, 배열(array)를 만들어보자.배열 안에는 title, poster가 있다.지금 하는 작업은 api에서 찾은 정보를 배열할 수 있는 array를 만드는 것이다. array 내의 map이라는 기능을 사용해보자.map은 새로운 array를 만든다. 그것은 우리가 제공한.. 더보기 ReactJS - Props로부터의 Dataflow | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* Dataflow with props - props에서 오는 데이터메인 컴포넌트 앱은 영화 이미지들을 가져올 것이다.그리고 그 영화들은 카드 형태로 보여진다.-> 메인 컴포넌트는 무비 리스트가 있다는 뜻이다.-> 그리고 그 리스트 안에 영화카드엔 해당 영화의 정보가 각각 담길 것이다.-> 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 줄 것이다.-> 어떻게 부모자 자식에게 정보를 주느냐? 바로 props를 통해서이다. 영화리스트를 만들어 보자.4개의 영화를 넣었고, 이 영화들의 '제목'을 자식 컴포넌트인 movie에게 보내고 싶다면?.. 더보기 ReactJS - JSX를 이용해 React Components 만들기 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이전 편에서 다루었던, 코드이다. 코드(paragraph) 사이에 hello thlee!를 삽입한 것을 볼 수 있다. 그에 따른 결과이다. 이번엔 태그 안에 있는 코드를 다 지워보겠다. 예상했듯이 빈 공간이 나타난다. App.css로 가서, css 코드도 다 지우도록 하자. App component를 살펴보자.이것들은 각자 다른 functions과 methods를 가지고 있는데,우리가 기억해야 할 것은 모든 components는 render funciton을 가지고 있다는 것이다. render의 기능은 '이 componenet가 나.. 더보기 ReactJS - Hello world 출력 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* ReactJS 수업을 위해서는 다음과 같은 프로그램을 우선적으로 설치해야 한다NodeJS, npm, Yarn, Create React App Create React App - 웹팩과 같은 툴을 사용할 필요 없이 손쉽게 리액트 앱을 만들어 주는 tool설치를 한 후, 만든 폴더 내로 들어가 yarn start 명령어를 사용해 react를 시작할 수 있다.react를 시작하면, 자동으로 웹 브라우저가 연결된다.(locathost)코드에디터(여기서는 VSC)를 이용해 코드를 수정할 수 있다. 이미 모든 파일들이 셋업되어 있을 것이다.여기.. 더보기 이전 1 다음
