목록react (23)
JS' 공부흔적
모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 크게 3가지로 분류할 수 있는데, 마운트, 업데이트, 언마운트가 그 3가지이다. 마운트는 컴포넌트가 생성되고 DOM이 업데이트되어 웹 브라우저 상에 나타나는 것이다. 업데이트는 말 그대로 컴포넌트를 업데이트하는 것이다. 언마운트는 마운트의 반대 개념으로, 컴포넌트를 DOM에서 제거하는 것이다. 총 9가지가 있는데 참고로 이는 클래스형 컴포넌트에서만 사용이 가능하다. 함수 컴포넌트에서는 Hooks를 사용한다. 오늘은 클래스형 컴포넌트에서 쓰이는 라이프사이클 메서드 9가지를 알아보자. 1. render() 최종적으로 작업한 UI를 렌더링하는, 즉 리액트 요소를 반환하는 메서드이다. 따라서 라이프사이클 메서드 중 유일하게 필수 메서드이다. rend..
이 글은 아래 글의 후속편이니 아래 글부터 보고 오는 것을 추천한다. [React Redux] React에서 Redux를 사용해보자(1) 이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이 2junsu.tistory.com 이제 추가 기능을 구현했으니 삭제 기능을 구현해보자. 삭제 기능에서 해야할 것은 특정 할 일에 붙어있는 삭제 버튼을 누르면 해당 할 일을 삭제하는 것이다. 따라서 특정 할 일에 대한 id가 필요하다. 그 후 할 일들이 저장된 배열을 돌면서 해당 id를 가지는 할 일을 제외한 나머지를 새로운 배열에 넣은 후..
이 글은 Redux의 기본 개념에 대해 알고 있다고 가정하고 진행한다. 개념을 잘 모른다면 아래 포스팅을 참고하면 좋을 듯! [Redux] Vanilla Redux의 기본 개념 Redux는 Javascript의 상태 관리 라이브러리이다. 보통 React와 함께 많이 사용되지만, Augular, jQuery, vanilla JavaScript 등 여러 framework에서 사용이 가능하다. Redux에 기본적인 개념 및 용어를 알아보자.. 2junsu.tistory.com 할 일을 추가하고 삭제할 수 있는 간단한 Todo List를 구현하면서 React에서 Redux를 사용하는 법을 알아보자. 이 글에서는 '추가' 기능을 구현한다. 또한 Redux에 익숙해지기 위한 글이므로 Local Storage는 사용..