Language76 [React] 1-1. 리액트 이해 리액트는 구조가 MVC, MVW 등인 프레임워크와 달리 오직 V(view) 만 신경 쓰는 라이브러리이다. 컴포넌트: 특정 부분이 어떻게 생길지 정하는 선언체 초기랜더링: 어떤 UI 관련 프레임워크, 라이브러리를 사용하든지 간에 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요하다. render() 함수는 컴포넌트가 어떻게 생겼는지 정의하는 역할을 한다. 이 함수는 html 형식의 문자열을 반환하지 않고, 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환한다. 컴포넌트 내부에는 또 다른 컴포넌트들이 들어갈 수 있다. 이 때 render 함수를 실행하면 그 내부에 잇는 컴포넌트들도 재귀적으로 렌더링한다. 이렇게 최상위 컴포넌트의 렌더링 작업이 끝나면 지니고 잇는 정보들을 사용하여 HTM.. 2020. 10. 27. [React] 1-10. document 를 접근하는 ref ref document.querySelector('input').focus() 위의 코드처럼 자바스크립트에서 직접 접근할 때는 보통 직접 'document' 키워드를 통해 접근하였지만, 리액트에서는 직접 document를 통해 접근하는일은 거의 없다. 리액트가 화면을 컨트롤 할 수 있게 하는 것이 좋다. 리액트 개발을 하다보면 DOM 에 직접적인 접근을 해야 할 때가 있습니다. 그럴 때는 ref 라는것을 사용한다. 아래 예와 같이 input 등에 focus를 해야할 때 특정 DOM의 크기를 가져와야할 때 외부 라이브러리(플레이어, 차트)를 사용할 때 hello; // 클래스 선언 render(){ return ( {this.state.first}곱하기{this.state.second}는? {this.he.. 2020. 9. 25. [JavaScript] 스프레드(spread) 문법 스프레드(spread) 객체 혹은 배열을 펼칠 수가 있다 문법: 배열을 빠져나온다. const fruit = { name: '과일' }; const greenfruit = { name: '과일', color: 'green' }; const greenmelonfruit = { name: '과일', color: 'green', attribute: 'melon' }; console.log(fruit); console.log(greenfruit); console.log(greenmelonfruit); 먼저, fruit 라는 객체를 선언한다음, greenfruit 객체를 만들었습니다. 이때 greenfruit는 name: '과일' 을 그대로 두고, 새로운 객체를 만들어서 사용하였습니다. 그 이후, greenmel.. 2020. 9. 23. [JavaScript] 호출 스택과 이벤트 루프 호출 스택 함수가 호출() 될 때 호출스택에 들어간다고 생각하고 끝날 떄 }를 나간다고 생각하면 편하다. 다만 호출 스택으로 설명이 안되는 것이 있다 바로 setInterval(tick, 2000) 이다. 호출 스택, 백그라운드(노드 내부 엔진), 태스크 큐(백그라운드에서 보낸 콜백들이 실행 대기중)로 구성되어 있다 먼저 setInterval(tick, 2000) 함수가 호출스택에서 실행된다. 실행이 끝나면 호출스택에서 사라진다. 백그라운드에서 tick이 2초마다 호출스택에 다시 넣어준다. 호출스택에 넣어줘야 다시 실행이 되기 때문이다. 백그라운드에 여러개의 작업들이 들어가 있을 수 있다. ex) 이벤트리스너, 프로미스 등등 콜백함수가 비동기적으로 실행될 수 있게 대기중이다. 이벤트 루프: 무한루프처럼 .. 2020. 9. 19. 이전 1 ··· 10 11 12 13 14 15 16 ··· 19 다음
