전체 글

리액트 - 컴포넌트 생명주기 (Lifecycle)

라이프사이클 (Lifecycle) 리액트 컴포넌트에는 라이프사이클(생명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링 되기 전부터 시작하여 페이지에서 사라질 때 끝이 난다. 리액트 프로젝트를 진행하다 보면 가끔 컴포넌트를 처음으로 렌더링 할 때 어떤 작업을 처리해야 하거나, 컴포넌트를 업데이트하기 전/후로 어떤 작업을 처리해야 할 수도 있고, 불필요한 업데이트를 방지해야 할 수도 있다. 위와 같은 상황에서 컴포넌트 라이프사이클 메서드를 사용한다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있으며, 함수형 컴포넌트에서는 사용할 수 없다. 대신 함수형 컴포넌트에는 Hooks 기능을 사용하여 비슷한 작업을 처리할 수 있다. 라이프사이클 메서드의 종류 라이플 사이클 메서드의 종류는 총..

React 클래스형, 함수형 컴포넌트 차이

React Component React의 Component 선언 방식은 두 가지로 나뉜다. 첫번째는 클래스형 컴포넌트, 두번째는 함수형 컴포넌트이다. 현재 많은 사람들이 함수형 컴포넌트로 개발을 진행하지만 기존에 클래스형 컴포넌트를 개발중이던 곳도 많을 수 있기 때문에 그 프로젝트의 유지보수를 위해서라도 클래스형 컴포넌트에 대한 개념을 알고 있으면 많은 도움이 될 것이다. Class Component VS Functional Component 일반적인 차이점 클래스형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. 임의 메서드를 정의할 수 있다. 함수형 컴포넌트 state와 LifeCycle API의 사용이 가능하다. (16.8 버전이후 제공되는 Hook으로 해결 가능) 클래스형 컴포넌..

Javascript - 원시값(Primitive)의 메서드

원시값의 메서드 (Methods of Primitive) 원시값 (Primitive)이란? Javascript에서 말하는 원시값(Primitive)이란 무얼 뜻하는 것일까? 아래는 MDN에서 정의한 원시 값의 뜻이다. 원시 값(primitive, 또는 원시 자료형)이란 객체가 아니면서 메서드도 가지지 않는 데이터 입니다. 자바스크립트의 원시 값은 객체가 아니지만, 마치 객체처럼 다룰 수 있다. 원시값에도 객체에서처럼 메서드를 호출할 수 있다. 이와 관련해서는 아래에서 조금 더 깊게 알아보도록하자. 다만 원시값은 객체가 아니라는 점은 꼭 기억해야 한다. 원시값 vs 객체 원시값과 객체는 아래와 같은 차이점을 가지고 있다. 원시값 원시형 값으로, 총 일곱가지 종류가 있다. 문자(string), 숫자(numb..

Javascript - Set을 알아보자

이전 포스팅에서는 Key, Value로 이루어진 맵(Map)이라는 자료 구조형을 알아보았다. 유용한 Property 및 메소드 등을 활용하여 유용하게 쓰이는 자료구조였지만 맵은 중복 값을 허용한다. 이를테면 아래와 같다. let map = new Map(); map.set('s', 1); map.set('s', 2); map.set('r', 3); console.log(map) // Result // s : 2 // r : 3 위의 코드를 보면 알 수 있듯이, set함수를 통해 's'라는 동일한 키 값으로 저장할 경우 이전 데이터를 엎어 쓰게 된다. 이를 방지하려면 set을 하기전, has()함수를 통해 값이 있는지를 확인하고 저장해야 하는 번거로움이 있다. Map 뿐만 아니라, 다른 상황에서도 마찬가지..

Javascript - 맵(Map)을 알아보자

자바스크립트로 개발하면서 가장 많이 사용하게 되는 자료구조에는 객체와 배열이 있다. 객체는 키가 있는 컬렉션을 저장할 수 있고, 배열은 순서가 있는 컬렉션을 저장한다. 하지만 점차 복잡해져가는 소프트웨어 시장속에서 위의 두 자료구조만으로 개발하기에는 코드가 많이 복잡해짐에 따라 맵(Map)과 셋(Set)이 등장하게 됐다. (Set에 관해서는 다음 포스팅에서 다뤄볼 예정이다) 맵 (Map) 맵은 키가 있는 데이터를 저장한다는 관점에서는 객체와 유사하다. 하지만 맵은 키에 다양한 자료형을 허용한다는 점에서 차이가 있다. 아래의 코드처럼 다양한 자료형을 Key에 사용할 수 있다. let map = new Map(); map.set('1', '1'); // 문자 Key map.set(1, 'one'); // 숫..