리액트 썸네일형 리스트형 ReactJS - Loading States | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 우리가 필요한 데이터가 항상 존재하지는 않을 것이다.데이터 없이 컴포넌트가 로딩을 하고,데이터를 위해 API를 불러서,API가 데이터를 주면,컴포넌트 state를 업데이트 할 것이다. 자, 이제 API콜을 타임아웃 기능으로 유사하게 구현해보자.이를 위해, 영화리스트를 function 내부로 이동한다.이제 state 내부는 텅 비어있다.이제 함수는 영화가 나타나기를 5초를 기다릴 것이다.이 에러를 확인해보면, state.movie가 존재하지 않음으로 인해 property 'map'이 정의되지 않았다고 나온다.여기서 map을 돌리려고 .. 더보기 ReactJS - this.setState() 연습 | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 포스팅에서는 컴포넌트 외부에 있는 무비 리스트를 state 안으로 옮겨보자.컴포턴트 외부에 있는 무비 리스트를 삭제하고, state 안에 붙여넣는다.그러면, 에러메시지; 'movie'는 정의되지 않았다고 뜬다.왜냐면 컴포넌트가 movies를 더이상 찾을 수 없기 때문이다.그래서 movies 앞에 this.state. 를 붙여주자.저장, 새로고침을 하면 이전과 동일.이전 시간 작업한 greeting을 삭제하고,이제 기존 영화 리스트에서 한 개의 영화를 더 추가하는 작업을 하자. componentDidMount() 밑에 timeo.. 더보기 ReactJS - Thinking in React: Component State | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 포스팅에서 다룰 state는 리액트 컴포넌트 안에 있는 오브젝트이다.state가 바뀔 때 마다, 컴포넌트는 다시 render할 것이다. 첫번째 state를 만들어 보자.state = {greeting: 'Hello!'}와{this.state.greeting}을 넣어보자.Hello!가 출력된다.componentDidMount() 내에 함수를 넣어보자.컴포넌트가 mount되면 5초(5000ms)를 기다리고 greeting을 업데이트 할 것이다.위에 작성한 것처럼, state를 직접적으로 쓰면 안된다.저장하고 살펴보면,직접적으로 s.. 더보기 ReactJS - React에서의 Lifecycel Events | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 이번 시간에 다룰 component lifecycle이란, 컴포넌트는 여러 기능을 정해진 순서대로 실행하는데, 그것을 의미한다.우리가 render을 할 때, 그러니까 우리가 컴포넌트를 띄울 때, 위의 사진대로 하겠다는 것이다.componentWillMount() -> render() ->componentDidMount() 이 싸이클은 자동으로 발생한다. 원하든 원하지 않든!정말 위에 말한 순서대로 발생하는지 console.log()을 넣어보자.콘솔 창을 띄워보면, 정말로WillMount -> DidRender -> DidMount순.. 더보기 ReactJS - Validating Props with PropTypes | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* 앞의 포스팅에서 출력 결과는 잘 나왔지만, 콘솔 창을 보면 에러가 뜬다."Each child in an array or iterator shoud have~~~" => array에 있는 각 차일드는 반드시 고유한 key prop을 가져야 한다. 이 말은, 지난 번에 작성한 맵핑은 새로운 array를 만든다.따라서 우리는 array 안에 많은 영화를 갖게 될 것이다. React를 엘리먼트가 많을 경우, key라는 것을 줘야한다.이 key는 고유해야 한다. 따라서 우리는 각 엘리먼트에 id 값을 부여하거나...또는 mapping을 통해.. 더보기 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 다음
