Programming-[Frontend] (62) 썸네일형 리스트형 React / Hook / 개요 Hook의 개요 Hook은 Class를 작성할 필요없이 함수형 컴포넌트에서 상태값을 사용할 수 있는 방식이다. React 버전 16.8부터 새로이 적용되었다. 공식문서의 Hook이 만들어진 이유를 읽어보면, 기존에는 Lifecycle을 중심으로하여 State와 메서드가 뒤섞이고 복잡해지면서 컴포넌트가 방대해지는 문제가 있었다. 그리고 Javascript의 Class 코드의 재사용성 저하와 코드 구성 난해함을 해결하기 위해 Hook을 사용하기 시작했다고 되어있다. https://ko.reactjs.org/docs/hooks-intro.html#motivation 자세한 동기 Class 컴포넌트로 작성하다보면 Wrapper hell 이라는 현상이 발생하게 된다. 컴포넌트를 다른 컴포넌트로 감싸주는 구조이기 .. React / 기초2 / State, props와 클래스 컴포넌트 작성 : dark mode 구현해보기 이전글React / 기초1 / React 설치, JSX, component 1. State앞선 글에서 작성한 바와 같이, 클래스 컴포넌트는 상태를 변경할 수 있는 요소를 갖고 있는데, 그것이 바로 state 이다. 클래스 컴포넌트 안에서 state를 정의하고, 이벤트 등에서 활용하게 된다. state는 직접적인 수정이 불가하고 반드시 setState라는 메서드를 이용해서만 변경해야한다. 가장 많이 사용되는 예제인 Counter 만들기를 해보자. 1-1. State 부분만 집중해서 보기다른 부분들은 다음 섹션에서 하나씩 기술할 것이다. 우선은 6번줄을 보면, this.state로 {count : 0} 이라는 객체가 정의되어 있음을 볼 수 있다. 사용자의 명령에 따라 반응할 정보를 객체 형태로 만들어 놓고,.. React / 기초4 / 이벤트 처리하기 이전글 React / 기초3 / LifeCycle 1. React에서 Event 처리 시 유의할 점 React에서의 Event 처리 방식은 DOM에서와 매우 유사하지만, 몇가지 차이점이 존재한다. 1. onclick 속성에 JSX 문법으로 중괄호 {}를 쓰고, 안에 함수명을 적는다. >> 함수 실행문이 아닌 함수명만 적는다. 이것은 React가 JSX를 Javascript로 렌더링할때 함수를 자동으로 실행하기 때문이다. 1 2 3 4 5 6 7 8 9 // HTML 방식 Activate Lasers // React 방식 Activate Lasers cs 2. 기본 동작 방지를 위해 false 반환이 아닌 preventDefault()를 사용해야 한다. HTML에서의 링크를 여는 기본동작은 아래와 같은 코.. React / 기초3 / LifeCycle 이전글 React / 기초2 / State, props와 클래스 컴포넌트 작성 개요 1. LifeCycle 어떤 컴포넌트가 생성, 갱신, 삭제될 때 컴포넌트는 새롭게 렌더링 된다. 즉 DOM 구조를 업데이트하게 되는 것이다. 새롭게 렌더링 함으로써 동적으로 변하는 웹페이지를 만들 수 있게 된다. 렌더링은 경우에 따라 렌더링 시점과 단계가 지정되어 있다. 아래의 표에 그 내용이 정리되어 있다. (공식문서 - projects.wojtekmaj.pl/react-lifecycle-methods-diagram/ ) 아래 부분에서 componentDidMount, componentDidUpdate, componentWillUnmount 메서드를 확인할 수 있다. 각 LifeCycle 단계를 이용하기 위한 메서드로,.. React / 기초1 / React 설치, JSX, component 1. React 개요 사용자와의 interaction이 많아짐에 따라서, DOM 관리와 상태값 지정이 복잡해졌고, 이에 따라 기능 요소에만 집중하는 Library가 생겨나게 되었다. 그중 하나가 React 이다. React는 컴포넌트(Component) 개념에 집중하는 프론트엔드 라이브러리이다. 컴포넌트란 '하나의 의미를 가진 독립적인 단위 모듈'을 의미한다. React에서는 의미와 기능을 갖는 Tag 자체를 만든다. 이번 글에서는 React 설치 방법과 React를 구성하는 기본개념인 JSX, 엘리먼트 렌더링, Component와 Props에 대해서 알아본다. 2. JSX JSX 사용 이유 어떤 엘리먼트를 만들 때, HTML tag까지 함께 지정한다. JSX : Javascript의 태그 형식 문법. .. Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Async/await 앞서 비동기 함수를 처리하는 callback, Promise 방식에 대한 글을 작성하였다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise 2개의 글을 완전히 이해해야지만, 아래의 async/await 문법을 이해할 수 있다. 1. Async/await 사용 이유 앞서 살펴본 예시에서는 비동기 함수들의 결과를 사용자가 원하는대로 출력하기 위해서 callback 함수를 중첩 형태로 처리하거나, Promise를 .then, .catch의 형태로 '이어서' 작성해주는 형태였다. Async/await는 사용자가 굳이 함수들을 '이어주는' 형태를 고민하지 않더.. Javascript / 기초 / 비동기 프로그래밍(Asynchronous) : Promise 이 글은 Javascript의 비동기 프로그래밍의 기초적인 이해를 마치고, 비동기 프로그래밍을 위한 Promise 문법에 대해 정리한 글이다. 이 글의 이해를 위해서는 먼저 아래 링크의 글을 완전히 이해하고 있어야 한다. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout 1. Promise callback 함수의 중첩(callback hell)을 피하기 위해 사용하기 편한 Promise 문법에 대해 정리한다. Promise는 추후 다룰 client-server간 비동기 처리의 핵심 내용이므로 잘 이해하여야 한다. 각 함수의 실행에 걸리는 시간과 상관없이 내가 원하는 순서대로 함수들을 실행하기 위해서는 callback 함수의 중첩이 필요했다. 이.. Javascript / 기초 / 비동기(Asynchronous), 콜백(callback), setTimeout 1. 비동기 프로그래밍 개요 보통 동기/비동기 방식은 Client-Server간의 요청과 응답 관계를 통해 설명한다. 동기 방식은 클라이언트와 서버가 함께 협력하여 일한다는 것이다. client가 일을 안할 때는 server가 일을 하고, server가 일을 안할때는 client가 일을 하게 된다. 비동기 방식은 client가 요청한 일을 server가 완료하기 전에, client가 다른일들을 처리하는 것이다. 다시 말해 client가 어떤 시간이 걸리는 일을 server에 시켜놓고, server가 그 일을 하는 동안 client는 그 다음 일들에 접근하여 처리하는 방식이다. sever에서 실행이 끝날 때까지 기다리는 방식으로 일을 해서는 웹페이지나 프로그램의 정상적인 작동이 어렵기 때문이다. clien.. 이전 1 2 3 4 5 6 ··· 8 다음
