공부한 내용/React JS (15) 썸네일형 리스트형 [React JS] Component State state는 리액트 컴포넌트 안에 있는 오브젝트다. 규칙은 state가 바뀔 때마다, 컴포넌트는 다시 render 할 것이다. 첫번째 state를 만드는 법은 state = {greeting: "Hello"} 그리고 출력할 곳에 {this.state.greeting} 요렇게 작성하면 된다. 이제 컴포넌트가 mount되면 5초를 기다리고 greeting을 업데이트 할거야 그래서 setTimeout을 하는거다. 그래서 코드를 작성해보자. componentDidMount(){ setTimeout(() => { this.setState({ greeting: 'Hello again!' }) }, 5000) } 이렇게 작성하면된다. 이 뜻은 컴포넌트가 mount 할때마다, greeting의 헬로를 헬로 어게인으로 .. [React JS] 라이프싸이클 컴포넌트 컴포넌트는 많은 functions을 갖고 있고, 그들은 순서대로 자동으로 작동한다. // Render: componentWillMount() -> render() -> componentDidMount() // Update componentWillReceiveProps() -> shouldComponentUpdate() -> componentWillUpdate() -> render() -> component [React JS]PropType 과 isRequired 우리가 이전에 했던 것을 콘솔에서 확인해보면 오류가 뜬다. array에 있는 각 차일드는 반드시 고유한 key prop을 가져야한다. 이 말은 즉 우리는 array 안에 굉장히 많은 영화 정보를 넣을 것이다. 그런데 React는 엘리먼트가 많을 경우 key 라는 것을 줘야만 한다. 그래서 우리는 기존에 있는 코드를 아래와 같이 변경할 것이다. index를 넣어서 영화정보 한개당 id값으로 넘버(고유한 키값을 주는것임)를 매겨주는 것이다. 그러면 오류가 사라진다! 다음 작업을 하기 위해 yarn add prop-types 새로 인스톨하자 해당 디렉토리에서 yarn add prop-types 해서 새로 인스톨하자 인스톨이 완료되면 movie.js 가서 PropTypes를 불러오면 된다. import Prop.. [React JS] array map 기능 사용하여 리스트만들기 이번에는 영화 리스트를 만들어볼 것이다.지난 번에 만든 리스트는 효율적이지 않기때문에..우리는 api를 이용해서 엄청난 양의 영어정보를 가져올것이다. 그러기 위해서 는 일단, array를 만들 것이다. const movies = [ { title: "matrix", poster: "http://www.phildam.net/include/images/data/board/f73a2a2908feb45c6b8fe4c766e5acb3.jpg" }, { title: "Full Metal Jacket", poster: "http://postfiles14.naver.net/MjAxNzA0MjNfNzkg/MDAxNDkyOTU2MDk2MTQ3.60GK7pUyGaxHOUUCrQhrpT2kQgLH-5Pe44iZeMd2li0g.. [React JS] props를 사용해서 데이터를 저장하고 출력해보자. React 에는 2개의 주요 컨셉이 있다. 하나는 state 나머지 하나는 props 이번에는 props를 다뤄볼 것이다. Dataflow with Props 메인 컴포넌트 app는 모든 이미지들을 가져올 것이다. 그리고 그 영화들은 카드형태로 보여줄 것이다. 메인 컴포넌트는 무비리스트가 있다는 뜻이다. 그리고 그 리스트안에 영화카드 그리고 그 안에 영화의 정보가 각각 담긴다. 자 일단 App.js 파일을 연다 그리고 import 다음 구문에 const movies = [ "matrix", "Full Metal Jacket", "Oldboy", "Star Wars" ] 입력한다. 이것은 추후에 movie의 영화 제목이라는 데이터를 얻게 된것이고 이를 아래와 같이 출력할 것이다. 그리고 현재 이 데이터가 .. [React JS] 컴포넌트와 JSX에 대해 알아보자 일단 그림판을 이용해서 컴포넌트를 만들어보겠다. 아참.. 나는 리눅스를 사용하기 때문에 윈도우 그림판과 비슷한 kolourpaint를 사용하였다.kolourpaint 설치방법은 아래링크를 참고하길 바란다. http://ksch93.tistory.com/14 자! 그러면 영화리스트 앱을 만들 것이다. 대략적인 컴포넌트를 만들어보자! 이렇게 되겠다.자! 이제 나는 아톰 에디터를 사용한다. 아톰을 켜서 저번에 만들었던 파일을 열어보자! 자 app.js 를 살펴보면 자바스크립트안에 html 언어가 있지 않는가?? 요것을 jsx라고 부른다. jsx는 리액트 컴포넌트를 만들때 사용하는 언어다. 예를 들면, css의 'class'가 아니라 'className'이라고 쓴다. 그 다음, 이미지의 경우 소스를 보면 10번.. [React JS] 우분투 node.js와 npm 그리고 facebook create react app 설치하기 React JS 를 배우기 전에, React JS는 자바스크립트로 이루어져있다. 자바스크립트의 정보 또한 엄청나게 많기 때문에, 이용하기가 좋다. 그래서 React JS를 배우게 되면 자바스크립트의 실력이 자연스럽게 늘 것이다. React JS 를 배우기 전에, 웹팩에 대한 소개를 하겠다. 웹팩은 여러 파일을 브라우저가 읽을 수 있게 만들어주는 것이라고 생각하면 된다. React JS의 실습에 들어가기 전에, 우리는 facebook 'create react app'으로 설정 작업없이 한번에 작업을 시작하도록 할것이다. 즉, facebook 'create react app' 내에 웹팩이 들어있다고 생각하면 된다. 실습을 하기전에 node.js와 npm 그리고 facebook 'create react app.. 이전 1 2 다음
