전체 글(31)
-
2. props & state
1. props 리액트의 특징 중 하나는 '단방향 흐름'이다. 단방향 흐름이란 말 그대로 데이터가 한 방향으로 밖에 나갈 수 없다는 것이다. 즉, 데이터는 상속관계에서 상위 컴포넌트에서 하위 컴포넌트로 밖에 줄 수 없다는 말이다. 이때 하위 컴포넌트에 전달할 수 있는 방법이 props이다. 2. state state는 각 컴포넌트의 '상태'이다. props는 단순히 데이터를 전달한다는 것에 그친다면, state는 해당 컴포넌트의 상태로 가지고 있을 수 있을 수 있다. 예제) ReactDOM.render( , document.getElementById("app") ); //App class App extends React.Component { constructor(props) { super(props); ..
2020.09.12 -
호이스팅(hoisting)이란 무엇인가??
자바스크립트에서 문법(?)이라고 할 수 있는 것 중 하나로 호이스팅이 있다. 호이스팅이란 Hoisting is a JavaScript mechanism where variables and function declarations are moved to the top of their scope before code execution. 이라고 설명해준다. 다른 곳도 마찬가지로 이렇게 설명해놓았는데, 번역하자면 '변수나 함수를 선언한 것을 위로 끌어올려 실행한다'는 뜻이다. 예를 들어 우리가 생각하기에 자연스러운 순서는 다음과 같다. function hoist(){ console.log('hello'); } hoist(); // 'hello' 그렇지만, chrome에서 console 창을 열어 다음과 같이 실행..
2020.09.10 -
1. React, Component & JSX
많이 유명한 javascript의 라이브러리로 사용자의 인터페이스를 만들기 위해 사용한다. 아마 초보 및 막 시작한 사람들이 페이지를 작성한다면 html내에서 태그를 통해 작성을 할 것이다. react도 html을 쓴다는 것은 같지만, html 태그를 jsx의 형태로 바꾸어 작성한다는 차이점이 있지만, 다음과 같은 특징이 있다. 1. Component Component를 쉽게말하면 화면에 보이는 '뷰 단위'이다. 버튼, 창, 네이게이터 이런 것 하나하나가 모두 컴포넌트라고 불릴 수 있다. 우리가 html에서 div 혹은 section태그로 단위를 묶어서 영역을 나누는 것을 react에서는 이런 것들을 하나의 Component로 작성한다고 할 수 있다. 예를 들어 하나의 버튼을 만든다고 생각하면, 다음과 ..
2020.09.06 -
Closure 란?
보호되어 있는 글입니다.
2020.09.05 -
call, apply, bind (3) - bind
bind란? 지난 call과 apply에서 원래 지정된 this를 사용하는 것이 아닌, 다른 객체 혹은 주체를 가져와 메소드만 사용할 수 있다는 것을 배웠다. bind가 하는 것은 this만 변경하는 것이다. call과 apply는 this 대상을 '변경'시키고 메소드를 '실행'시키는 것 까지 하는 것이라면, bind는 단지 this 대상만을 변경시켜주는 것이다. (1) 아무 대상도 지정안해줬을때 처음 실행되고서 어떤 지정도 안해줬다면 this는 전역객체를 가리키며, 이는 window객체를 가리킨다. this //Window {parent: Window, opener: null, top: Window, length: 1, frames: Window, …} (2)bind하기 전, 객체 두개를 설정한다. o..
2020.08.30 -
call, apply, bind (2) - apply
apply와 call이 다른 것은 딱 하나이다. this를 바꾸는 것은 맞지만, 배열로 받느냐 아니냐의 차이로 apply를 쓰느냐 마느냐로 나뉜다. call과 예시가 비슷하지만, 배열만 다르게 하면 된다. 바꿔보고 싶으면 앞선 call을 설명한 페이지에서 받는 인자를 배열로 바꿔보면 된다. 여기서는 간단한 예시로만 표현하겠다. function add(num1,num2){ return num1+num2 } add.call(null,1,2); //3 add.apply(null,[1,2]) //3 단, 배열뿐만 아니라 객체에서도 사용할 수 있다는 점도 특징이다. let introduce = { myself : function (){ return `hello my name is ${this.first_name}..
2020.08.28