react12 react 클래스 컴포넌트의 super 소개 super(props)는 클래스 컴포넌트를 사용하게 된다면 항상 constructor안에 사용되게 됩니다. 그래서 이번에는 왜 super(props)를 사용하는지 알아 보고 사용하지 않았을때 어떤 이슈가 발생하는지 알아보도록 합시다. class ClassApp extends React.Component { constructor(props) { super(props); } } super()는 자식 클래스가 생성될 때 부모 클래스의 생성자를 참조하는 방법으로 react 클래스 컴포넌트의 부모 클래스는 React.Component가 됩니다. 그리고 주의할 점으로 super를 사용하기 전에는 constructor에서 this를 사용할 수 없습니다. 자바스크립트가 이런 제약사항을 강제하는 데에는 사실 합리적.. react 클래스 컴포넌트의 this 리엑트에는 클래스 컴포넌트를 사용할 때는 this를 어떻게 사용하는지가 컴포넌트의 퀄리티를 바꾸게 됩니다. 튜토리얼이나 도큐먼트 문서를 보면 props나 state를 관리할 때 this를 사용하는 것을 많이 볼 수 있습니다. 그렇다면 this가 어떻게 사용되는지 알아보도록 하겠습니다. import React from "react"; class App extends React.Component { // 상태값 num 선언 state = { num: 0 }; // 버튼을 누르면 this.state.num을 1만큼 증가시킴 increase() { this.setState(current => ({ num: current.num + 1 })); console.log("increase메서드의 this는", this.. React Recoil 사용하기 소개 Recoil은 component의 state를 더 쉽게 관리하기 위해 페이스북에서 제작한 react state 관리 라이브러리다. react 자체에 이미 state 관리 기능이 내장되어 있지만 보완해야할 점이 있어 Recoil이 만들어 졌다. react의 한계 https://recoiljs.org/ko/docs/introduction/motivation - component의 state는 공통된 element까지 끌어올림으로써 공유될 수 있지만, 이 과정에서 거대한 트리가 다시 렌더링되는 효과를 야기하기도 한다. - Context는 단일 값만 저장할 수 있으며, 자체 소비자(consumer)를 가지는 여러 값들의 집합을 담을 수는 없다. - 이 두가지 특성이 트리의 최상단(state가 존재하는 곳).. React에서 Axios 사용하기 소개 Axios, Ajax, Fetch 같은 http client들은 비동기 http 통신을 위한 방법 중 하나입니다. 특히 이번에 소개할 Axios는 Fetch와 유사한 점이 많고 promise 객체를 기반으로 사용됩니다. async와 await을 사용하여 함수의 실행 순서를 제어할 수 있고 HTTP 요청 취소 및 요청과 응답을 JSON 형태로 자동 변경해 Fetch처럼 stringify를 사용하지 않아도 됩니다. 또한 interceptors를 사용해 requests가 then이나 catch로 처리되기 전에 cancle하거나 interceptor 할 수 있고 자체적으로 요청 위조에 대한 보안 기능을 가지고 있어 보안면에서 훌륭합니다. Promise javascript 비동기를 간편하게 처리할 수 있도록.. React 컴포넌트 라이브러리 Top 11 React는 가장 많이 사용되는 기술 중 하나입니다. React를 사용하는 사람은 처음 페이스북으로부터 만들어진 2013년부터 상승 곡선을 그리며 꾸준히 늘어왔고 최근에 이르러서는 그 수가 엄청나게 늘었습니다. 이로 인해 사람들은 직접 코딩한 컴포넌트들을 공유하기 시작하였고 이 글은 공유된 컴포넌트들 중에 인기 있는 11가지를 소개하는 글입니다. Material-UI Material-UI는 Github에서 가장 인기있는 React 컴포넌트 라이브러리입니다. 간단하고 가벼우며 Google의 Material Design 사양에 따라 제작되었습니다. 레이아웃, 양식, 탐색, 데이터 표시 및 기타 여러 위젯에 대한 컴포넌트가 존재합니다. @material-ui/style로 컴포넌트를 스타일링 할 수 있고 CSS.. React Fragments React를 이용해 컴포넌트를 만들고 JSX로 엘리먼트를 return해줄때 하나의 부모 엘리먼트로 감싸어지지 않으면 에러가 발생하는 경험을 겪은적이 있었다. function FuncName(props) { ... return ; } 이를 해결하기 위해서 원래 구조 계획에 있지 않던 엘리먼트를 생성하여 씌워주었지만 이 문제를 해결해주는 좋은 방법이 React에는 이미 있었다. 바로 이번 글에서 소개할 Fragments라는 문법이다. Fragments Fragments는 DOM에 별도의 노드를 추가하지 않고 여러 자식을 그룹화할 수 있다. class Table extends React.Component { render() { return ( ); } } 위와 같은 코드가 있을때 Columns 컴포넌트에는 만.. React 주요 개념 Event 처리 react 엘리먼트에서 이벤트를 처리하는 방법은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사하지만 몇 가지 차이점이 있습니다. convention react의 이벤트는 소문자 대신 캐멀 케이스를 사용합니다. JSX를 사용하기 때문에 함수로 이벤트 핸들러를 전달합니다. click preventDefault react에서는 false를 반환해도 기본 동작을 방지할 수 없습니다. 반드시 preventDefault 를 명시적으로 호출해야 합니다. // HTML Style click // React JSX Style function ClickButton () { function handler(e) { e.preventdefault(); alert('click'); } return ( click }; } ES.. React 주요 개념 Lifecycle of Component react에서는 생성, 업데이트, 제거될 때 자동으로 트리거 되는 lifecycle API를 가지고 있습니다. 컴포넌트 생성 시 자주 사용하던 render메소도 역시 react 컴포넌트의 lifecycle 메소드중 하나입니다. 컴포넌트가 생성될때 실행되는 메소드 render() 클래스 React.Component의 하위 class에서 반드시 정의해야 하는 메서드, 이 메서드가 호출되면 this.props, this.state의 값을 이용해 아래 목록 중 1가지를 반환해야 합니다. - React 엘리먼트, 일반적으로 JSX를 사용해서 생성됩니다. - Portal, 별도의 DOM 하위 트리에 자식 엘리먼트를 렌더링 합니다. - Boolean 또는 nulll, 아무것도 렌더링 하지 않습니다. - 배열과 Fra.. React 주요 개념 State State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 제어됩니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } } ReactDOM.render( , document.getElementById('root') ); 위 코드를 props에서 state로 변경해 보겠습니다. class Clock extends React.Component { constructor(props) { // 초기 this.state를 지정하게 해주는 클래스 super(props); this.state = {date: new Date()}; } rende.. 이전 1 2 다음
