Programming-[Frontend]/ReactJS (6) 썸네일형 리스트형 React / Router Router의 필요성 각 URL 주소마다 서버와 통신하여 데이터를 내려다주는게 아니라, Single Page Application(SPA) 형태로 작성된 웹페이지를 서버에서 브라우저로 한번에 내려받고, 사용자의 요청에 따라 URL이 브라우저에서만 바뀌게 해서 서버와의 통신 횟수와 양을 줄여준다. React router : Quick Start 따라하기 설치 create-react-app으로 react 폴더를 만들고, 해당 디렉토리에서 npm install react-router-dom 을 입력하여 라우터 라이브러리를 설치한다. (앱을 위한 react-native 에서는 react-router-native를 이용한다.) 파일구조 App.js 파일의 구조이다. react-router-dom에서 Browser.. 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의 태그 형식 문법. .. 이전 1 다음
