코드 유인원

이벤트 처리하기

리액트에서의 이벤트 등록 리액트 공식 튜토리얼에서는 HTML 태그에서 바로 이벤트를 주는 법과 비교하면서 설명하고 있는데 나는 자바스크립트에서 선택자를 이용해 불러와서 이벤트를 등록하는 방법만 사용하고 있어 그 예시는 이해를 잘 못하겠지만 클래스 이름으로 가져와서 이벤트를 부여하는 것이 아닌 사용할 이벤트 함수 이름을 태그에 미리 등록해두고 컴포넌트 내에서 이벤트 함수를 만드는 것..같다 class App extends React.Component { constructor(props) { super(props); this.state = { number :0 } } render() { return( Hello, React {this.state.number} + - ) } } ReactDOM.render( ..

React 2020. 11. 4. 22:55

promise

promise const promise = new Promise(function executor(resolve, reject){ --- });프로미스 생성자는 실행자라고 불리는 함수를 인자로 받는데 이 실행자는 차례로 resolve, reject 콜백 함수를 받는다 이 실행자 함수를 작성하고 그 결과에 따라서 reslove와 reject 둘 중 하나를 무조건 호출해야한다 작성한 함수가 성공적일 경우 reslove를 호출 실패했을 경우 reject를 호출 프로미스 객체 생성 const promise = new Promise(function executor(resolve, reject){ setTimeout(()=>resolve(console.log('done')),1000); });이 코드를..

JavaScript/ES6 2020. 11. 3. 23:52

class

class 동일한 종류의 객체를 여러개 생성해야 할 경우에는 생성자 함수를 이용했었다 ES6 이후에는 클래스 문법을 통해서 생성자 함수와 동일한 작업을 해줄 수 있는데 class Student{ ... ... } const student1 = new Student(arg1,arg2);객체를 생성하는 부분도 생성자 함수와 동일하다 new를 통해서 새로운 객체가 생성되고 인자들이 그 객체로 넘어간다 constructor 그 뒤 클래스 내부에 있는 constructor 메소드가 실행되며 객체가 초기화된다 그럼 Student 내부에 constructor메소드를 만들어주자 class Student{ constructor(name, age) { this.name = name; this.age = age; } } c..

JavaScript/ES6 2020. 11. 3. 04:00

lifecycle

생명주기 컴포넌트가 DOM트리에 렌더링되기까지의 과정을 마운트라고 한다 생명주기 함수들 중에 지금 알아볼 함수는 componentDidMount, componentWillUnmount이다 componentDidMount class Count extends React.Component{ constructor(props) { super(props); this.state = { cnt : 0 } } counting(number){ return number +=1; } render() { this.state.cnt = this.counting(this.state.cnt); return ( {this.state.cnt} ) } } function Start(){ ReactDOM.render( , document...

React 2020. 11. 1. 22:30

state

이전 포스팅에서는 props객체를 통해서 자식 컴포넌트에게 값을 주는 것을 확인했다 state는 props와 비슷하게 컴포넌트가 가지고 있는 값이지만 부모에게서 넘겨 받는 것이 아닌 처음부터 컴포넌트 내부에 존재하고 있는 값을 state라고 한다 순수 함수처럼 작동해야하는 컴포넌트의 특성상 props는 외부에서 넘겨 받는 값이므로 내부에서 건드릴 수 없지만 state는 내부에서 수정이 가능하다 state와 lifecycle(생명주기 메소드)를 사용하기 위해선 컴포넌트를 클래스로 정의해주어야하는데 최근버전에서도 Hook을 이용해서 함수형 컴포넌트에서도 state와 생명주기 메소드를 관리할 수 있다고 하는데 이 포스팅은 리액트 공식 튜토리얼의 순서를 따라가고 있으니 일단은 이렇게.. let cnt = -1;..

React 2020. 10. 31. 16:52

Components

컴포넌트란 입력 받은 값을 가지고 화면에 표시할 React엘리먼트를 반환하는 함수라고 생각하면 쉽다 컴포넌트를 만드는 방법 중에 하나인 함수를 이용하는 법에 대해 알아보자 function Hello(){ return Hello, World } 이렇게 작성한 함수는 Hello 컴포넌트가 된다 위에서 설명한 대로 Hello컴포넌트는 JSX를 반환하고 있음으로 이는 곳 리액트 엘리먼트를 반환하고 있다 다음 코드를 살펴보자 const element = ; 리액트는 컴포넌트로 반환되고 있는 엘리먼트를 발견하면 그와 같이 반환되는 자식들을 그 컴포넌트의 내부에 암묵적으로 전달한다 위 코드에서는 Hello를 발견해서 컴포넌트가 작동하려할 때 자식인 {name : 'React'}가 props의 객체로 전달되는 것 그 ..

React 2020. 10. 30. 03:34

require

Node에서는 모듈을 불러올 때 require 함수를 사용해서 불러온다 require함수는 인자로 가져올 모듈의 경로를 적어주면된다 위 정보만 가지고 foo.js에서 bar.js를 모듈로 가져오는 연습을 해보자 //bar.js const a = 'this is bar'; const b = 'b in bar'; // foo.js const bar = require('./bar.js'); console.log(bar.a); console.log(bar.b); 둘은 같은 디렉토리에 저장되어있다 이를 실행하면 어떻게 될까? 예상대로라면 bar에서 정의한 a와 b가 모두 출력되어야하지만 그렇게 작동하지 않는다 왜 일까? 이를 이해하기 위해서는 require의 작동 방식을 알아봐야하는데 대충 알아듣기 쉽게 설명하면..

Node.js 2020. 10. 29. 13:11

렌더링

렌더링 우리가 이전에 배운 JSX를 이용해 리액트 엘리먼트를 만든 것을 기존의 DOM트리에 업데이트하는 행위를 렌더링이라고 생각하면 된다 리액트 엘리먼트는 보통 root라는 id값을 가지고 있는 DOM노드에 렌더링하는데 코드로 살펴보자 우리가 이전 시간에 배웠던 자바스크립트의 변수를 넣은 JSX를 이용해 element라는 리액트 엘리먼트를 생성했다 ReactDOM.render(element, document.getElementById('root'));보면 생성한 리액트 엘리먼트와 root DOM트리를 인자로 넘기는 걸 볼 수 있는데 root DOM아레에 생성한 리액트 엘리먼트가 정상적으로 들어갔다 업데이트 리액트 엘리먼트는 불변객체이다 이게 뜻하는 것은 엘리먼트는 수정될 수 없기 때문에 값..

React 2020. 10. 28. 00:15

JSX

const element = this is JSX; js안에 작성되었지만 html태그도 있고 문자열 처럼 보이기도 하는 이 코드는 JSX라고 불리는 언어인데 브라우저가 실행되면 이 코드는 바벨에 의해서 JSX->JS 로 변환된다 변환된 코드를 보면 리액트 엘리먼트를 생성해서 반환한다 화면에 뭔가를 그릴 때 마다 리액트 엘리먼트를 우측의 코드처럼 생성해야한다면 너무 귀찮을 것이다 그래서 편의를 위해 JSX를 사용하는 것 자바스크립트 처럼 사용 JSX에서는 중괄호 안에서 모든 자바스크립트의 표현식을 쓸 수 있다 const language = 'JSX'; const element = this is {language}; 처럼 변수도 사용이 가능하며 function squart(n){ return n*n } co..

React 2020. 10. 27. 16:22

arrow function

함수 선언문은 자바스크립트에서 가장 간단하게 함수를 만드는 방법 중에 하나이다 function func(a,b,c) { return a+b+c; } console.log(func(1,2,3)); // 6 더 간단하게 만드는 방법이 있다 const func = (arg1,arg2,arg3) => arg1+arg2+arg3; console.log(func(1,2,3)); //6 화살표 함수(arrow function)라고 불리는떼 가운데 있는 화살표에서 따온 이름이다 앞에 괄호 안에는 인자를 받고 뒤에는 표현식이 온다 const func = arg => console.log(arg); func('123'); //123 인자가 하나라면 괄호도 생략 가능 const func = () => console.log(..

JavaScript/ES6 2020. 10. 26. 20:32