Blog

React는 오픈소스로 구성된 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용합니다. 사용자 인터페이스를 아름답게 만들수 있게 도와주는 다양한 리액트 기반의 UI 라이브러리가 있습니다. 대표적으로 Material-UI, Semantic-UI-React, Ant-Design, React-Bootstrap, Grommet 등이 있으며 간략하게 소개합니다. 1. Material-UI https://material-ui.com/?ref=designrevision.com Google Material Design 을 사용하는 React 컴포넌트를 제공합니다.React

1. React Component Element Rendering class CorrectComponent extends React.Component { // React Component is rendering only single element. render() { return ( <h4> Hello React </h4> ) } } class WrongComponent extends React.Component { // React Component is not rendering more than 1 element. render() { return ( <h4> Hello </h4>

단위 테스트란? 단위테스트는 어플리케이션을 테스트 함에 있어 가장 작은 단위로 분리하여 테스팅을 진행하는것을 말합니다. 가장 작은 단위(함수 또는 메소드..)로 수행하는 단위테스트를 통해 프로그램의 잘못된 수행과 예기치 못한 버그를 미리 예측하여 수정할 수 있습니다. 사전에 테스트 코드가 작성 또는 수정이 될때 단위테스트를 통해 정상수행 여부를 확인하여 어플레케이션 아키텍처 및

React에는 2가지 종류의 component가 있습니다. 1. Class Component - Component를 만들 때 class를 이용하여 만드는 방법입니다. 보통 React를 사용할 때 기본적으로 사용하는 방법입니다. Class Component를 사용하는 이유는 state와 lifecycle를 이용할 수 있다는 큰 장점 때문에 많이 사용되고 있습니다. 2. Function Component - Function Component는 state와 lifecycle를 따로 사용할 수 없다는

이 글을 통해 React의 Context 개념과 사용에 대해 간단히 알아보고, 실제로 context를 사용하여 간단한 컴포넌트를 제작해보겠습니다. 1. Context란? 처음 React로 개발을 진행할 때, 컴포넌트 간에 데이터를 전달하는 데 있어 불편함을 겪었습니다. 부모 컴포넌트가 자식 컴포넌트에게 데이터를 '직접' 전달해야만 했기 때문입니다. 데이터를 여러 컴포넌트들이 사용하는 경우에는 각각의 컴포넌트의 props로

조건부 렌더링(Conditional Rendering) React Component는 스스로 State를 통해서 화면을 나타내며, 이러한 React Component를 조합하여 복잡한 UI를 생성할 수 있습니다. 복잡한 UI를 생성하기 위해서는 React Component는 로직을 사용할 수 있어야 하며, 로직에 따른 UI를 화면에 나타낼 것입니다. 먼저 우리는 화면에 UI요소들을 나타내기위한 JSX templet 문법 을 먼저 다룰 줄 알아야

React에서 Event를 다루는 방식과 HTML에서 Event를 다루는 방식에는 약간의 차이점이 있습니다. 1. Event 사용 방법 * HTML에서는 event를 정의 할 때 모든 event를 소문자로 정의합니다. React에서는 camelcase를 이용하여 event 정의를 합니다. React에서 제공해주는 DOM event ("이벤트 이름" 항목 부분을 참조) - https://ko.reactjs.org/docs/events.html#clipboard-events