리액트 검색 결과

해당 글 6건
[React] 리덕스 사용 전 Flux 아키텍처 알아보기

Flux Flux 의 배경 FLux 는 MVC 문제 해결하는 목적으로 고안된 어플리케이션 아키텍처이다. MVC 의 문제점은 대규모 어플리케이션인 경우 MVC 가 너무 빠르고 복잡해진다는 점이다. 그렇기 때문에 코드 예측이나 테스트의 어려움, 유지보수 비용 증가 등 다양한 문제가 발생한 것이다. Flux 란 무엇일까 Flux 어플리케이션은 디스패처(Dispatcher), 스토어(Store), 뷰(View) 3가지로 구성된다. Action Action 은 중앙 저장소에 저장된 state 에 무슨 동작을 할 것인지 적어놓는 객체이다. 상태에 어떠한 변화가 필요하면 action 이란 것이 발생한다. 액션 객체에는 type 필드를 반드시 가지고 있어야 한다. 이 값을 액션의 이름이라고 생각하면 되는데 그 외의 값..
Front-End/React 2021. 2. 23. 15:12
[React] 이벤트 핸들러 네이밍

EVENT HANDLER NAMING IN REACT 리액트 공부를 하면서, 이름을 짓는 건 너무나 어려운 문제다. 앞으로는 고민할 일이 없도록 정리해야겠다는 생각이 들었다. Props props 이름을 정의할 때에는 on* 접두사를 붙여서 작성한다. 예를들면, onClick 이다. 기본적으로 제공되는 event handler naming 규칙과 일치하며, on* 은 어떠한 이벤트가 연결된다는 것을 의미한다. Function handle* 로 작성한다. 예를들면, handleClick 이다. handle* 는 이벤트가 발생했을 때 어떤 것이 호출되는지를 의미한다. 복잡한 경우의 네이밍 위의 경우보다 좀더 복잡한 경우에 네이밍(naming) 을 하는 경우에는 접두사 + 명사 + 동사 순서로 작성한다. 앞에..
Front-End/React 2021. 2. 17. 15:58
[React] 클래스형 컴포넌트와 함수형 컴포넌트

클래스형 컴포넌트와 함수형 컴포넌트 1. 함수형 컴포넌트 장점 - 클래스형 컴포넌트보다 선언하기가 간편합니다. - 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다. - 프로젝트를 완성 후 빌드하고 배포할 때에도 파일 크기가 작습니다. 2. 함수형 컴포넌트 단점 - state 와 라이프사이클 API 의 사용이 불가능했지만, React v16.8 업데이트 후 Hooks 기능이 도입되면서 해결되었습니다.
Front-End/React 2020. 2. 9. 21:41
[React] 3. 리액트 JSX

React JSX JSX 는 JavaScript 의 확장 문법으로 XML 과 유사하게 생겼습니다. 이런 형식으로 작성된 코드는 Browser 에서 실행되기 전 코드가 번들링(Bundlering, 파일을 묶듯이 연결)되는 과정과정에서 바벨을 사용하여 일반 JavaScript 코드로 변환됩니다. function App() { return ( Hello react ); } 위 코드는 아래와 같이 변환됩니다. function App() { return React.createElement("div", null, "Hello " React.createElement("b", null, "react")); } JSX 를 사용하면 간편하게 UI 를 렌더링할 수 있습니다. 3.1 JSX 의 장점 (1) 보기 쉽고 익숙함 ..
Front-End/React 2020. 2. 2. 15:53
[React] 2. 리액트의 작업 환경 설정(masOS)

리액트의 작업 환경 설정 리액트 공부를 시작하기에 앞서 첫 React Project 를 만들 것입니다. 2.1 Node.js 와 npm 리액트 프로젝트를 만들 때에는 Node.js 가 필수요건입니다. Node.js 는 크롬 V8 JavaScript 엔진으로 빌드한 JavaScript RunTime 입니다. 이것으로 웹 브라우저 환경이 아닌 곳에서도 JavaScript 를 사용하여 연산할 수 있습니다. 리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이기 때문에 Node.js 와 직접적인 연관성은 없으나 프로젝트를 개발하는 데 있어서 필요한 주 도구들이 Node.js 를 사용하기 때문에 설치하는 것입니다. 2.1.1 Node.js 와 npm 설치 : macOS 제 작업환경은 MacOS 이므로 터미널을 열..
Front-End/React 2020. 2. 2. 14:13
[React] 1. 리액트 시작과 특징

리액트 시작과 특징 리액트란? 최대한 성능을 아끼고 편안한 사용자 경험(user experience) 을 제공하면서 구현하고자 개발한 것이 리액트(React)입니다. 리액트는 JavaScript의 라이브러리로 사용자 인터페이스를 만드는데 사용합니다. 1. 컴포넌트(component) - 특정 부분이 어떻게 생길지 정하는 선언체입니다. - 재사용이 가능한 API로 수많은 기능 등을 내장하고 있으며, 컴포넌트 하나에서 해당 컴포넌트의 생김새와 작동방식을 정의합니다. 2. 렌더링(rendering) - 사용자의 화면에 뷰를 보여주는 것입니다. - 초기 렌더링 : render() 함수 => 컴포넌트가 어떻게 생겼는지 정의하는 역할을 합니다. 이 함수는 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객..
Front-End/React 2020. 1. 24. 21:55