React

리액트 디자인 패턴에 대해서..

🤔 포스팅 이유 매주 기술 멘토님에게 프로젝트 피드백을 받고 있는데, 디자인 패턴에 대해 공부해 보라는 피드백을 받았다. 아토믹 패턴.. 무슨 무슨 패턴.. 예시를 들어주셨는데, 기술 구현에만 초점을 맞추느라 공부를 미뤘다가 오늘에서야 찾아본다! 🥲 공부 후 결론 현 프로젝트의 대부분은 Presentational and Container Component Pattern (이하 PCC) 을 따르고 있고 Pages 에서 상태 관리를 하고 있는 부분은 Atomic Design Pattern (이하 Atom) 과 비슷했다. PCC 방식을 사용하면 관심사 분리를 잘할 수 있다. 로직 부분과 UI 분리가 용이하다. 그러나 props 드릴링이 많이 생겨서 코드가 복잡해지고 독립성이 떨어진다. Atom 을 쓰면 컴포넌..

React 상태 관리 비교 Redux & React Query & SWR

상태 관리에 대한 고민 프로젝트의 댓글 기능을 구현하던 중, 습관적으로 사용했던 리덕스 코드를 걷어내고 나니 새로운 문제점을 발견했습니다. 댓글 생성, 업데이트, 삭제시 서버에 API 를 요청하고 응답 값을 받아 오기까지의 시간이 꽤나(?) 길다는 것입니다. 응답값에 따라 성공 여부를 판단하고 추가(수정,삭제) 된 댓글을 보여주기 때문에 이 부분은 어쩔 수 없는 부분이라는 생각이 들었지만..? 순간, 다른 서비스들은 어떻게 실시간으로 반응하지?! 라는 의문점이 들었습니다. 찾아 보니, 해결 방법은 있었습니다. 요청이 성공했을 것이라 예상하고 값을 미리 보여주고! 그 다음 서버에서 응답 값을 받았을 때, 실패했다면 값을 거둬 들이는 것입니다. 저는 이 방법을 활용해야 겠다는 생각이 들었고 현 프로젝트에 잘..

React Redux Toolkit 사용하기

Redux Toolkit 은 Redux 를 더 편하게 쓰기 위해 나왔습니다. 기본 사용법은 같으나 Module 파일이 더 간결하게 바뀌었습니다. 1. 툴킷 설치하기 CRA 를 통해 새로운 프로젝트를 생성하고 yarn 을 통해서 아래 패키지를 설치 yarn add react-redux @reduxjs/toolkit 2. Redux 와 Redux Toolkit 의 차이점 큰 차이점은 Action Value와 Action Creator를 이제 직접 생성해주지 않고 Action Value, Action Creator, Reducer 가 하나로 합쳐졌다는 점입니다. 하나로 합칠때 Slice 라는 API 를 사용합니다. 이 Slice 를 사용하면, 한 번에 3개가 만들어집니다. 3. Redux Toolkit 사용..

React Hook 이란 ?

Hook 정의 React 공식 문서의 Hook 의 정의입니다. Hook 은 함수형 컴포넌트에서도 생명주기 기능을 사용할 수 있게 함으로써, 함수형 컴포넌트의 활용성을 높이기 위해 나온 함수입니다. 덕분에 복잡한 클래스형 컴포넌트만을 사용하지 않아도 됩니다. Hook 을 프로젝트에 도입하기 위해 기존의 class 형 컴포넌트들을 수정할 필요는 없다고 합니다. 공식 문서에서 설명하듯이 점진적으로 적용 해나는 것이 권장됩니다. Hook 종류 리액트에서 제공하는 Hook 들이 있습니다. 그러나 사용자들이 필요한 Hook 을 만들어서 사용하기도 합니다. 이것을 Custom Hook 이라고 하는데, 개인들이 만든 유용한 Hook 들은 npm 을 통해 다운받아 사용할 수도 있습니다. 리액트 공식 문서에 나와 있는 H..

React Life Cycle [ Class component 와 Function component ]

React Life Cycle 이란? LifeCycle 은 컴포넌트의 생명주기입니다. 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라질 때 호출되는 메서드들이 있습니다. 이 메서드들을 생명주기 메서드라고 합니다. 컴포넌트는 Class component 와 function component 가 있습니다. Class Component Life Cycle Class Component 에서는 라이프 사이클에 따라서 우리가 원하는 순간에 원하는 코드를실행시키고 싶다면, 정해진 메소드를 통해서 사용할 수 있습니다. 원래 function component 에서는 불가능했지만, 현재는 hook 을 통해서 가능하게 되었습니다. 전체적인 흐름은 위의 이미지를 참고했지만 세부적인 메서드명은 공식 문서를 참고했습니다...

React Ref 와 Dom

Ref는 render 메서드에서 생성된 DOM 노드나 React 엘리먼트에 접근하는 방법을 제공합니다. 직접적으로 자식을 수정해야 하는 경우가 있습니다. 그 자식은 React 컴포넌트의 인스턴스 혹은 Dom 엘리먼트 일 수도 있습니다. 두 가지 모두 수정할 수 있는 방법이 있습니다. 그러나 Ref 는 남용하면 안됩니다. 필요한 상황에서만 사용해야 합니다. Ref를 사용해야 할 때 - 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때. - 애니메이션을 직접적으로 실행시킬 때. - 서드 파티 DOM 라이브러리를 React와 같이 사용할 때 클래스 컴포넌트와 함수 컴포넌트가 ref 를 활용할 수 있는 범위가 다릅니다. 함수 컴포넌트는 인스턴스가 없기 때문에 함수 컴포넌트에 ref 어트리뷰트를 사용할 ..

React 데이터 바인딩

React 는 단방향 데이터 바인딩을 합니다. 데이터 바인딩이란? 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치 시키는 것을 말합니다. MVC 에서 View(화면에 보이는 데이터, HTML) Model(브라우저 메모리에 있는 데이터, JS) 에 해당됩니다. 데이터 바인딩은 양방향과 단방향으로 나뉩니다. 단방향 데이터 바인딩 한쪽 방향으로만 제어가 가능한 것을 의미합니다. JS(Model) 에서는 화면에 보이는 데이터를 수정할 수 있습니다. 그러나 사용자는 화면에서 값을 변경할 수는 있지만 JS 에 있는 데이터를 수정할 수 없습니다. 때문에 화면에서 변경된 값을 감지해서 JS 를 수정해야 합니다. React 의 경우 state 가 변경이 되면 set 으로 값을 바꿔 주는 작업을 해야 합니다...

React 프로젝트 GitHub Pages 배포하기

https://github.com/ 먼저 위 사이트에서 새로운 Repository 를 만듭니다. 회원 가입을 해야 만들 수 있습니다. Repository 메뉴에 들어가면 녹색의 New 버튼이 있습니다. 클릭해서 이름을 작성하고 public 으로 만들어 줍니다. 생성을 하고 나면 방금 만든 Repo 를 클릭해서 들어갑니다. 그럼 아래와 같이 뜨는데 여기서 녹색의 Code 를 클릭하여 Https 탭의 경로를 복사합니다. 터미널을 켭니다. 위에서 만든 깃헙 Repo 와 연결할 프로젝트 폴더로 이동합니다. cd git remote add origin 이동한 후에 위와 같이 입력합니다. 부분에는 아까 복사한 github 의 repo 주소를 넣어 줍니다. 아무런 오류 메시지가 뜨지 않는다면 잘 연결된 겁니다. gi..

React Component

Component 정의 컴포넌트는 UI를 재사용 가능한 개별적인 조각으로 나눈 것을 말합니다. 컴포넌트는 React 엘리먼트를 반환하는데, 엘리먼트는 화면에 표시할 내용을 기술하는 React 의 가장 작은 단위입니다. 리액트는 컴포넌트들의 집합이라고 할 수 있습니다. 컴포넌트 덕에 재활용성을 높이고 유지보수를 용이하게 할 수 있습니다. 왜냐하면 컴포넌트는 독립적이고 고립되어있고 재사용이 가능하기 때문입니다. 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눠집니다. 함수형 컴포넌트는 아래와 같이 생겼습니다. function Welcome(props) { return Hello, {props.name}; } 클래스형 컴포넌트는 아래와 같이 생겼습니다. class Welcome extends React.C..

React JSX 란?

JSX 정의 JSX 는 JavaScript 를 확장한 문법입니다. JSX 형식으로 작성한 코드는 브라우저에서 실행되기 전, 바벨 Babel 을 이용해 JSX를 React.createElement() 호출로 컴파일됩니다. 즉, JSX 는 편하게 React 'element' 를 생성하기 위해 사용합니다. const element = ( Hello, world! ); 위의 코드가 JSX 문법으로 작성한 것입니다. 이 코드는 컴파일 후 아래와 같이 변경됩니다. 아래의 코드는 React 엘리먼트입니다. React 는 이 객체를 읽어서 DOM을 구성하고 최신 상태로 유지하는 데 사용합니다. const element = React.createElement( 'h1', {className: 'greeting'}, '..