투투

React의 공식문서를 통해 JSX를 공부하고 정리해보자. 그동안 프로젝트를 하면서 자연스럽게 JSX를 사용하고 있었는데 정확한 개념과 사용방법 등을 정리해보려고 한다. JSX란? 아래의 문법은 JSX를 통해 하나의 element를 생성한 것이다. const element = Hello, world!; JSX는 Javascript를 확장한 문법이다. 이는 브라우저에 실행되기 전에 코드가 Webpack으로 번들링되는 과정에서 Babel을 통해 일반 Javascript 형태의 코드로 변환된다. JSX를 통해 마크업과 로직을 분리하는 대신 두 개의 개념을 포함한 "컴포넌트"를 통해 관심사 분리를 할 수 있다. JSX 문법 부모 요소로 감싸기 컴포넌트에 여러 element를 반환한다면 반드시 하나의 부모 요소로..

React에는 useState, useEffect와 같은 Hook이 존재한다. Hook은 기존 클래스형 컴포넌트에서의 상태관리와 Life Cycle Method를 가볍게 사용할 수 있게 도와주며 로직의 재사용이 가능하도록 하였다. 또한 반복되는 로직을 자신만의 Hook을 만들어 구현하면 복잡함을 줄일 수 있다. Custom Hook의 장점 자신만의 Hook을 만드는 것이 어떠한 장점이 있는지 알면 알맞게 사용할 수 있을 것이다. 먼저 Custom Hook을 사용한 사례를 통해 필요성과 장점을 알아본 후에 특징을 살펴보자. 아래는 React로 간단한 로그인 폼을 작성한 것이다. 이제 아이디와 비밀번호에 대한 유효성 검사를 위한 로직을 구성해보자. function Login() { return ( 아이디: ..

Typescript를 배우기 전 React를 활용할 때 PropTypes를 사용할 필요가 있다. 다른 사람들과 프로젝트를 진행하면서 PropTypes를 사용하자고 정했지만 프로젝트 기한이 다가올수록 지키기 힘들었다. 앞으로는 Typescript를 사용하지 않는다면 반드시 PropTypes를 사용하는 습관을 길러야겠다. PropTypes 사용해야 하는 이유 상위 컴포넌트에서 하위 컴포넌트로 props를 전달할 때 구조가 복잡해지거나 시간이 지났을 때 기대와는 다른 props를 넘겨주는 실수를 할 수 있다. 예를 들어 어떠한 하위 컴포넌트에서 숫자를 전달받아 컴포넌트의 크기를 결정한다고 해보자. 만약 다른 사람이 해당 컴포넌트를 사용할 때 실수로 true값을 전달하면 어떻게 될까? 아무런 반응이 일어나지 않..

프로젝트를 시작하고 조금씩 코드가 복잡해져 나가고 다른 사람들의 코드와 Merge 했을 때 중구난방이 되어있는 형태를 보았다. 서로 규칙이 없었고 스스로 코드를 작성할 때 특정 규칙이 아닌 마음대로 작성하게 되면서 가독성, 재사용성 등이 현저히 떨어지는 코드가 되었다. 이를 해결하기위해 다른 사람들의 코드를 보던 중 리액트의 디자인 패턴을 알게 되었고, 가장 기본적인 패턴인 Container-Presenter 패턴을 공부해보고 이를 적용시켜보려고 한다. Container - Presenter 패턴의 개념 먼저 Container - Presenter 패턴에 대해 간략하게 알아보자. 이름에서 볼 수 있듯이 두 개의 구조로 분리한다는 것을 알 수 있다. 각각의 역할은 다음과 같다. Container : 데이터..

리액트로 컴포넌트를 개발했다면 각 컴포넌트에는 Life Cycle이 존재한다. Life Cycle를 이해하고 있어야 효율적으로 컴포넌트를 개발하고 적용시킬 수 있으며 디버깅도 좀 더 쉽게 할 수 있다고 생각한다. 이전에 Life Cycle에 대한 개념을 알지 못했을 때 데이터가 업데이트 되었지만 적용이 되지 않은 문제 등을 겪었다. 리액트를 통해 Life Cycle에 대한 개념과 관련 메서드, Hook 등을 알아보자. Life Cycle Life Cycle은 컴포넌트가 생성되고 제거될 때까지의 과정을 의미하며 각 과정에 따라서 생명주기 메서드가 순서대로 호출된다. 먼저 아래의 그림과같이 크게 3가지로 Life Cycle을 나눌 수 있다. Mount : 컴포넌트에 대한 인스턴스가 생성되고 DOM 구조에 삽..

여러 개의 상태관리와 유지보수를 쉽게하고 컴포넌트 별로 세분화하는 코드를 작성하기위해 리듀서도 세분화할 필요가 있다. 관리해야 할 상태과 적을 때는 상관없지만 관리해야 할 상태의 수가 많아질수록 액션과 리듀서를 나눴을 때 위와 같은 장점이 있을 것이다. "+" 버튼을 눌렀을 때 숫자를 증가시키는 컴포넌트(Count)와 문자를 추가하는 컴포넌트(Text)를 생성하였다. 또한 이에 대한 액션과 리듀서를 분리하였다. reducer 만들기 먼저 src/reducers 라는 폴더를 만들고 각각 Count, Text에 대한 리듀서를 생성한다. 각각 해당하는 컴포넌트에 대한 리듀서 역할을 한다. // ./src/reducers/count.js import { ADD_COUNT } from "../actions/cou..