Javascript27 nextjs 프로젝트 정리 보호되어 있는 글 입니다. 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.. javascript에서 Class 사용하기 - 2 Class 정의 JavaScript에서 Class는 사실 함수입니다. 함수를 함수 선언과 함수 표현식으로 정의할 수 있듯이 class 문법도 class 선언과 class 표현식 두가지 방법으로 정의가 가능합니다. JavaScript 엔진은 function 키워드를 만나면 Function 오브젝트를 생성하듯, class 키워드를 만나면 Class 오브젝트를 생성합니다. class는 클래스를 선언하는 키워드이고 Class 오브젝트는 엔진이 class 키워드로 생성한 오브젝트입니다. Class 선언 함수 선언과 달리 클래스 선언은 호이스팅이 일어나지 않기 때문에, 클래스를 사용하기 위해서는 먼저 선언을 해야합니다. 그렇지 않으면 ReferenceError 가 발생합니다. Class 표현식 Class 표현식은 .. javascript에서 Class 사용하기 - 1 소개 javascript는 ES6에서부터 Class 지원을 시작했습니다. 단 javascript의 class는 다른 객체지향 언어에서 사용되는 Class 문법과는 다르게 사용됩니다. javascript에는 Class라는 개념이 없기 때문에 javascript는 prototype을 이용해 상속을 구현합니다. prototype javascript의 Class를 이해하기 위해서는 prototype에 대한 이해가 선행되어야 하기 때문에 prototype에 대해서 알아보도록 합시다. 자바스크립트는 원시 값(primitive, 또는 원시 자료형)을 제외하고는 모두 객체입니다. Object와 Function은 function(즉, 생성자)입니다. object는 객체를 의미합니다. function Card() { } .. 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 컴포넌트에는 만.. 이전 1 2 3 다음
