javascript/React
-
react - 5. 상태와 프로퍼티javascript/React 2018. 11. 22. 23:51
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. state(상태)컴포넌트의 상태를 나타내며, 변화 할 수 있는 데이터의 집합.상태가 변화 하면 컴포넌트를 다시 랜더링 한다.컴포넌트의 상태를 나타내는 값은 "리스트에서 선택한 값", "체크박스에서 값이 체크됬는지 여부", " 텍스트박스의 텍스트" 등이다. 상태는 직접 변경 할 수 있다.상태는 외부에는 비공개 이며, 컴포넌트 스스로가 관리해야 하는 것상태를 변경 할 때는 this.setState()를 통해 값을 변경 한다. 상태가 변화 하면 다음과 같은 메서드가 자동 호출 된다. shouldComponentUpdate(nextProps, nextState)componentWillUpdate()render..
-
react - 4. 컴포넌트의 라이프 사이클 정리javascript/React 2018. 11. 12. 00:14
책 "모던 자바스크립트 개발자를 위한 리액트 프로그래밍" 의 내용을 복습 차원 에서 정리한 내용입니다. mount: DOM, 혹은 페이지 위에 올라갈 때 unmount: DOM 트리에서 삭제되거나 웹 페이지에서 없어질 때 컴포넌트가 생성되고, DOM에 마운트(추가) 될 때 다음과 같은 순서로 매서드가 호출된다. . constructor(props) - 객체가 생성될 때. componentWillmount() - 컴포넌트가 DOM에 마운트 되기 직전. render() - 컴포넌트가 렌더링될 때. componentDidMount() - 컴포넌트가 DOM에 마운트된 직후 컴포넌트의 프로퍼티가 변경되면 다음과 같은 메서드가 호출된다. . componentWillReceiveProps(nextProps) - 컴포..
-
react - 3. createElementjavascript/React 2018. 10. 28. 00:49
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. React.createElement 로 브라우저 DOM을 표현 할 수 있다. 표현 하는 방법은 다음과 같다.React.createElement("태그", 태그속성, 자식 노드) 2장에서 "안녕~!!" 이라는 텍스트를 출력 할때 의 소스를 보면 다음과 같다,React.createElement("h1", {id: "idarea", className: "classarea"}, "안녕~!!") 콘솔로 찍으면 다음과 같이 나온다. createElement 콘솔로 찍으면 $$typeof, key, props , type등 여러 필드가 나오는 것을 볼 수 있다.
-
react - 2. ReactDom 으로 그리기javascript/React 2018. 10. 23. 13:19
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. ReactDom에는 리액트 엘리먼트를 브라우저에 렌더링 하는데 필요한 모든 도구들이 들어 있다.리액트 엘리먼트와 그 모든 자식 엘리먼트를 함께 랜더링 하기 위해 ReactDOM.Render 를 사용한다. 아래의 이미지를 보면, ReactDOM.Render 는 첫번째 인자(빨간박스)는 렌더링할 리액트 엘리먼트,두번째 인자(노란박스)는 렌더링이 일어날 대상 DOM 노드다.위에 소스에서 보면 react-container 라는 id를 갖고 있는 div의 h1 태그 및 그 안에 내용이 추가 되어 화면에 렌더링이 되어 진다. 브라우저 화면 모든 DOM 렌더링 기능이 ReactDOM으로 옮겨 졌다.브라우저는 단지 리액트를 사용 할 수 있는..
-
react - 1. SPA, React란? SPA, React 에 대해서javascript/React 2018. 10. 23. 00:21
책 "learning React" 의 내용을 복습 차원에서 정리한 내용입니다. AJAX 가 생기면서 단일페이지 앱(Single-page Application) SPA 가 생겼다.자바스크립트를 사용해 DOM 변경을 효율적으로 처리하는 일은 아주 복잡하고 시간이 오래 걸리는 일이다.이에 대한 해법이 리액트다. React.js는 한가지 문제를 해결하기 위해서 만들어졌다,시시각각으로 변화하는 데이터를 사용하는 큰 규모의 애플리케이션을 만들기 위해서 이다. 리액트는 브라우저 DOM을 갱신 하기 위해 만든 라이브러리다.우리는 DOM API를 직접 조작 하지 않고 리액트 엘리먼트로 이루어진 가상돔을 다루거나 리액트가 UI를 생성하고 브라우저와 상호 작용하기 위해 사용하는 몇가지 명령을 다룬다. 리액트 엘리먼트는 개념..