해당 내용은 2022년 11월 08일 React Docs BETA 버전을 토대로 작성되었습니다. -링크 Purity - 순도 일부 JavaScript 함수는 순수하며 컴포넌트를 순수 함수로 작성하면 코드 베이스가 커짐에 따라 마주치는 당황스러운 버그와 예측하기 힘든 동작을 피할 수 있다. 순수 함수의 한 예인 수학 공식에 이미 익숙할 것이며 수학 공식을 예로 생각해보자. y = 2x 일때. x = 2 이면 y = 4 x = 3 이면 y = 6 x = 3 이면 y는 항상 6이다. 이것을 JavaScript로 작성하면 아래와 같다. double은 순수 함수이다. function double(number) { return 2 * number; } React는 위와 같은 개념을 중심으로 설계되었으며 작성하는 모..
해당 내용은 2022년 11월 08일 React Docs BETA 버전을 토대로 작성되었습니다. - 링크 👉 사전 지식 - Purity and Side Effect useEffect란 ? useEffect란 컴포넌트를 외부 시스템과 동기화할 수 있는 React hook이다. 컴포넌트를 외부 시스템과 동기화할 수 있다는 게 무슨 의미일까? 때때로 컴포넌트가 페이지에 표시되는 동안 네트워크, 일부 브라우저 API 또는 외부 라이브러리에 연결된 상태를 유지해야할 수 있다. 이러한 시스템들은 React에 의해 제어되지 않으므로 외부 시스템이라고 한다. 이러한 외부 시스템과 컴포넌트를 연결할 수 있는 역할을 하는 것이 useEffect hook인 것이다. 즉, 컴포넌트에서 Side Effect를 사용할 수 있게하..
삽입 정렬 알고리즘(Insertion Sort Algorithm) 앞에서부터 차례대로 이미 정렬된 배열 부분과 비교하여, 자신의 위치를 찾아 삽입해서 배열의 정렬된 부분을 점진적으로 구축하는 알고리즘이다. 왜 삽입 정렬인지 애니메이션을 통해 알 수 있다. 한 번에 하나를 취해서 올바른 위치에 삽입하는 것이다. 의사코드 1. 배열의 두 번째 요소를 선택하여 시작한다. 왜냐하면 첫 번째 요소는 정렬된 부분으로 간주하기 때문이다. 2. 앞의 요소와 비교하고 필요하면 swap한다. 3. 다음 요소로 계속 이동한 후 순서가 잘못된 경우, 정렬된 부분을 반복하여 요소를 올바른 위치에 배치한다. 4. 배열이 정렬될 때까지 반복한다. 삽입 정렬 구현 과정 function insertionSort(arr) { for (..
지난 시간 Sorting Algorithms이 무엇인지 그 중에서도 Bubble Sort에 대해서 알아보았다. 👉 Link - Sroting Algorithms + Bubble Sort 선택 정렬 알고리즘(Selection Sort Algorithm) 데이터 배열을 내림차순 혹은 오름차순으로 나열하는 과정에서 사용되는 정렬 알고리즘 중 하나로 데이터 배열에서 가장 작은 데이터를 선택하여 앞으로 보내는 정렬이다. 정렬 과정을 보면 첫 시작 값에서 시작하여 모든 데이터를 최소값을 찾은 뒤 교환한다. 교환된 최소값은 정렬이 된 것이며 다음 값에서 시작하여 다시 최소값을 찾아서 교환하기를 반복한다. 간단한 원리이다. bubble 정렬과 마찬가지로 swap이 발생한다. 선택 정렬의 의사코드를 살펴보자. 의사코드 ..
useReduer는 컴포넌트에 reducer를 추가할 수 있는 React Hook이다. 상태 업데이트가 많은 컴포넌트들이 많은 이벤트 헨들러에 분산되어 있으면 부담이 커질 수있다. 이런 경우, 컴포넌트 외부의 모든 상태 변화 로직을 reducer라는 단일 기능으로 통합할 수 있다. 쉽게 말자하면, 컴포넌트 내부의 상태를 변경하는 로직이 내부에 작성되어 있어 해당 로직을 다른 컴포넌트에서 재사용할 수 없기에 useReducer를 사용하여 해당 로직을 컴포넌트 외부에서 재사용할 수 있게 된다. reducer는 상태를 처리하는 하나의 방법이며 세 단계를 통해 작성된다. setting state에서 dispatching actions로 옮긴다. reducer 함수를 작성한다. 컴포넌트에서 reducer를 사용한..
해당 글은 2022/10/24 React Docs BETA 버전을 기반으로 작성되었습니다. 링크 React에서 props(properites)와 state는 일반 JavaScript 객체라고 한다. 두 객체는 모두 렌더링 결과물에 영향을 주는 정보는 갖고 있다. props는 (함수의 매개변수처럼) 컴포넌트에 전달되는 반면에 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. state와 prop을 정리하면 아래와 같다. 둘 다 일반 자바스크립트 객체다 state는 컴포넌트 안에서 사용된다 props는 컴포넌트에 매개변수처럼 전달하는 것이다 State Props 유스케이스 뷰에 렌더링돼야 하는 컴포넌트의 데이터를 저장하는 데 사용한다. 데이터, 이벤트 핸들러를 자식 컴포넌트에 전달하는 데..
정렬 알고리즘(Sorting Algorithm)은 무엇일까? 정렬 알고리즘은 컬랙션(배열과 같은)의 아이템들을 어떤 종류의 순서로 재배열하는 과정이다. 목록이나 트리 같은 데이터 구조의 정렬 등 다양하지만 배열에 초점을 두고 살펴보자. 여기서 핵심은 뭘 어떻게 비교해서 정렬하는지는 중요하지 않다. 오름차순이든, 내림차순이든, 순자를 기준으로 하든 상관없다. 👉정렬 알고리즘 애니메이션 정렬 알고리즘을 배워야 하는 이유는? 정렬은 흔히 발생하기에 이것들이 어떻게 동작하는지 이해하는 것은 중요하다. 데이터들을 정렬하는 방법은 많고 각 알고리즘에는 장단점이 있기에 상황에 맞는 알고리즘을 사용해야한다. 정렬은 다양한 접근법을 제공하고 비판적 사고가 필요한 아주 좋은 도전과제이자 문제이다. 1. 버블 정렬(Bubb..
목표 Searching Algorithm이 무엇인가 배열의 선형 검색(linear search) 정렬된 배열의 이진 검색(binary search) 나이브(navie) 문자열 검색 알고리즘, KMP 문자열 검색 알고리즘 선형 검색 알고리즘(linear search algorithm) 선형 검색은 데이터가 모인 집합(배열, 링크드리스트 등)의 처음부터 끝까지 하나씩 순서대로 비교하며 원하는 값을 찾아내는 알고리즘이다. 데이터를 정렬하거나 따로 건드릴 필요가 없고, 난이도가 쉬운 편이나, 데이터의 양이 많아지면 검색에 소요되는 시간도 비례하여 많아지고, 하나씩 일일이 비교하기 때문에 비효율적이라는 단점이 있다. JavaScript는 선형 검색 기능을 가지고 있다. indexOf includes find fi..
