NomadCoders 썸네일형 리스트형 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 - Props로부터의 Dataflow | NomadCoders | 프로그래밍 공부 * 이 포스팅은 Nomad Coders의 강의를 들으며 내용을 정리한 것이며, 모든 내용은 https://academy.nomadcoders.co/ 에서 보실 수 있습니다.* Dataflow with props - props에서 오는 데이터메인 컴포넌트 앱은 영화 이미지들을 가져올 것이다.그리고 그 영화들은 카드 형태로 보여진다.-> 메인 컴포넌트는 무비 리스트가 있다는 뜻이다.-> 그리고 그 리스트 안에 영화카드엔 해당 영화의 정보가 각각 담길 것이다.-> 부모 컴포넌트는 자식 컴포넌트에게 각각 정보를 줄 것이다.-> 어떻게 부모자 자식에게 정보를 주느냐? 바로 props를 통해서이다. 영화리스트를 만들어 보자.4개의 영화를 넣었고, 이 영화들의 '제목'을 자식 컴포넌트인 movie에게 보내고 싶다면?.. 더보기 이전 1 다음
