🧸이번에는 리액트 컴포넌트를 만들 때 사용하게 되는 문법인 JSX에 대해서 알아보겠다. 🧸 JSX란? JSX는 리액트에서 컴포넌트의 생김새를 정의할 때 사용하게 되는 문법이다. 얼핏보기에는 HTML처럼 생겼지만, 사실은 자바스크립트이다. 어떻게 자바스크립트가 되냐면, 바벨이라는 도구를 통해서 XML 형태의 코드가 자바스크립트로 변환이 된다. babeljs.io 를 들어가서 확인할 수 있다. 다음과 같이 babel에서는 왼쪽의 코드(JSX)를 저렇게 바꾸어준다는 것이다. 매번 createElement라는 것을 써서 호출하기엔 너무 어려우니까 JSX 문법을 통해 쉽게 작성하고, 바벨이 이를 변환해준다. 🧸 JSX의 규칙 JSX에도 규칙이 있다. 그 규칙에 대해서 알아보겠다. JSX에서 return 뒤에 사용..

🍨 이번 시간에는 첫 리액트 컴포넌트를 만들어보겠습니다. src 폴더에 hello.js라는 파일을 만든다. import React from "react"; 그리고 리액트를 사용하려면 항상 파일 위에 위와 같은 코드를 써주어야 한다. 이는 리액트를 불러와서 사용하겠다는 의미가 된다. 🍨 컴포넌트 만들어보기 컴포넌트를 만드는 방법에는 2가지가 있다. 1) 함수 형태로 컴포넌트 만들기 2) 클래스 형태로 컴포넌트 만들기 클래스 형태로 컴포넌트 만드는 것은 나중에 해보고, 일단은 함수 형태로 컴포넌트를 만들어보겠다. import React from "react"; function Hello(){ return 안녕하세요; } export default Hello; 컴포넌트의 이름은 대문자로 시작하며, 단어가 여러..

#4.0 Fetching Movies from API 🌼 이번시간에는 axios를 이용해서 API로부터 데이터를 fetch해올 것이다. 일반적으로 사람들이 자바스크립트에서 데이터를 fetch하는 방법은 fetch를 사용하는 것이다. 니콜라스는 fetch를 좋아하지는 않는다. 왜냐하면 더 좋은 방법이 있기 때문이다. Axios를 사용할 것이다. Axios는 니콜라스가 많이 사용했고 좋아한다. axios가 어떻게 동작하는지 궁금하다면, 이건 매우 쉽다. axios는 마치 fetch 위에 있는 작은 layer 이다. axios 설치 : npm install axios 🌼YTS의 API를 이용하기 우리가 쓸 API에 대해서 이야기하겠다. 우리는 YTS에서 만든 API를 사용할 것이다. 불법적인 토렌트 영화를 업..

🍉자바스크립트를 사용한 DOM 변형의 한계😥 DOM : 각 HTML에 대한 정보를 지니고 있는 자바스크립트 객체 인터랙션이 자주 발생하고 이에 따라 동적인 UI를 표현해야 한다면 규칙도 너무 다양해지고 관리하기도 매우 힘들 것이다. 웹 어플리케이션이 규모가 커지게 되면 코드가 난잡해지고 유지보수에도 어려움 🍉 새로운 발상을 가지고 등장하게 된 리액트💡 리액트는 어떠한 상태가 바뀌었을 때 DOM을 어떻게 업데이트할지 규칙을 정하는 것이 아니라 아예 다 날려버리고 처음부터 모든 것을 새로 만들어서 보여준다면 어떨까 라는 아이디어에서 개발이 되었다. 그렇게 한다면 업데이트를 어떻게 해야할지에 대한 고민을 전혀 안해도 되기 때문에 개발이 정말 쉬워질 것이다. 하지만 정말 동적인 UI를 보여주기 위해서 모든 것을..

#3.3 Planning the Movie Component 🧁 이번시간에는 우리 Movie App의 컴포넌트를 계획해볼 것이다. 우선 어플리케이션을 mount하자마자(mount: 컴포넌트가 생겨나는 것) state에 isLoading 변수를 true라고 선언해준 후, render에서 div 코드 안에 isLoading이 true라면 "Loading…"을, isLoading이 false라면 "We are ready"를 표시하도록 작성해준다. 원래는 this.state.isLoading이라고 적어주어야 하지만 ES6 문법을 통해 저렇게 적어주었다! import React from "react"; import PropTypes from "prop-types"; class App extends React.Co..

#3.2 Component Life Cycle 🍑 이번 시간에는 리액트 컴포넌트의 life cycle 메소드에 대해서 알아보겠다. 현재 우리는 리액트 컴포넌트에서 제공하는 메소드 중에서 render 메소드만 사용하고 있다. 그런데 사실 리액트 컴포넌트는 단순히 render 말고 더 많은 걸 가지고 있다. 이들은 life cycle 메소드를 가지는데, life cycle 메소드는 기본적으로 리액트가 컴포넌트를 생성하는 그리고 없애는 방법이다. 컴포넌트가 생성될 때 render 전에 호출되는 몇 가지 function이 있다. 컴포넌트가 render 된 후 호출되는 function 들이 존재한다. 예를 들면 우리가 add 함수를 통해 +1 +1 +1을 할 때 , 컴포넌트가 업데이트 될 때 호출되는 다른 함수가..