Enjoy Programming

react component에서 사용하는 유일한 function은 render function이다. 하지만 react class component는 단순히 render fucntion이외에 더많은 것이 있다. 이들은 life cycle method를 가지는데, 기본적으로 react가 component를 생성하고 다시 없애는 방법이다. 컴포넌트가 생성될 때, render전에 호출되는 몇가지 function이 있고~ render된 후 호출되는 다른 function들이 존재한다. 자 이제 life cycle method중 Mounting을 살펴보겠다. react 공식 문서에서 살펴보면 이 메소드는 컴포넌트의 인스턴스가 생성되어 Dom에 insert될 때 순서대로 호출된다고 한다. Mounting method중..

react의 Components에는 function conmponent와 class component가 있다. 앞서 포스팅한 내용은 function component들이고 이제 movie app을 만들 텐데 지금부터는 class component를 사용하겠다. class를 이용해 react class component(react에 이미 내장되어 있는 class component)로 부터 App class component에 extends했다. 현재는 App은 react.Component와 같은 역할을 한다. 기본적으로 Class react component는 return을 가지고 있지 않다. 무슨 말일까. 클레스 리액트 컴포넌트는 function이 아니기 때문에 return이 없다. 대신 render m..

기본적으로 클래스는 blueprint이다. 클래스는 화려한 object라고 한다. 먼저 클래스를 만들면서 이해해 보자. 클래스는 생성자(constructor)를 가지고 있다. User 라는 클래스를 만들고 constructor를 만들어 준다. this에 관한것은 차후 다루기로 하고 일단 class는 this도 가지고 있다. this.username 은 lee라고 명명해주고 console.log해주면 undefiend로 뜬다. 이제 할 일은 leeUser라는 User클래스의 instance를 생성해주겠다. 이렇게 instance를 생성해주고 나니 username에 대한 정보가 보인다. 그럼 instance는 무엇일까... 영어 사전을 보면 instance: 경우, 사례라고 뜬다. 직역해서 생각해보면 Use..

앞서 포스팅한 내용중 복사 붙여넣기로 컴포넌트에 다른 값을 계속 주는 것은 효율적이지 못하다. 예를들어 브라우저에서 데이터가 오면 그 데이터를 복사 붙여넣기로 넣을 수 없기 때문이다. 이제 웹사이트에 동적 데이터를 추가하는 방법을 알아야 한다. 예를 들어 서버에서 좋아하는 음식의 이름과 이미지가 담긴 리스트 데이터가 온다고 생각해보자 그럼 이 데이터들을 어떻게 하나씩 처리 할 것인가. 우선 가짜 리스트를 하나 만들어본다. 음식의 이름과 이미지가 담긴 리스트이다. 니코는 말한다 react는 just javascript라고 ~ 자 리스트 배열에 담긴것을 하나씩 무언가 적용시킬 때 쓰는 함수는? forEach도 있고 map도 있지만 여기서는 내가 적용시킬 것을 적용하고 그대로 리스트를 반환 할 것이므로 map..

자 이제 react를 배운다. nomad coder 의 react 로 영화앱만들기 코스로 배워보기로 한다. 먼저 react가 무엇인가. react는 현업에서 인기 있는 웹.앱 의 view를 개발 할 수 있도록 하는 라이브러리이다 즉 사용자가 조작하기 위한 UI를 만드는 것을 도와주는 라이브러리이다 특징으로는 1. 선언형 프로그래밍 : 먼저 프로그래밍은 선언형과 명령형으로 나뉜다. 선언형 - 함수형, 논리형, 제한형 프로그래밍 언어로 쓰인경우이다. 선언형 프로그램은 목표를 명시하고 알고리즘을 명시하지 않는다. 명령형 - 프로그래밍의 상태와 상태를 변경시키는 구문의 관점에서 연산을 설명하는 프로그래밍. 명령형 프로그램은 알고리즘을 명시하고 목표는 명시하지 않는다. 리액트는 선언형 성격에 맞게 원하는 결과를 ..

즉시 실행 함수 표현 - IIFE IIFE는 정의되자 마자 즉시 실행되는 자바스크립트 함수이다. 기본 구조는 (function () { statements } ) (); 이다. 이는 self-executing anonymous Function으로 알려진 디자인 패턴으로 크게 두 부분으로 구성된다. 첫 번째는 괄호 ((), Grouping Operator)로 둘러싸인 익명함수. 이는 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지 할 수 있을 뿐 아니라 IIFE 내부 안으로 다른 변수들이 접근하는 것을 막을 수 있는 방법이다. 두 번째 부분은 즉시 실행 함수를 생성하는 괄호()이다. 이를 통해 자바스크립트 엔진은 함수를 작시 해석해서 실행. 표현 내부의 변수는 외부로부터의 접근이 불가능하다. ..