전체 글 (237) 썸네일형 리스트형 [React] useReducer useReducer 이전에 상태관리는 useState를 이용해서 컴포넌트 내부에서 이루어졌습니다. 하지만 useReducer를 이용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리할 수 있습니다. 또한 여러개의 상태관리를 한번에 할 수 있습니다. 자세한 설명은 React 공식문서를 참고바랍니다. https://ko.reactjs.org/docs/hooks-reference.html#usereducer useReducer 사용해보기 Info.js Input.js Input.js에서 상태관리를 하고 Info.js로 전달해주는 소스코드를 볼 수 있습니다. 위에 설명한대로 컴포넌트에서 상태관리 로직을 분리시키고 따로 상태관리를 하였습니다. 이름, 나이, 색상 모두 Input.js에서 관리를하고 Info로 .. [React] useRef useRef useRef는 특정DOM을 선택해야하는 상황에서 사용을 합니다. 특정 엘리먼트의 크기를 가져온다거다나 스크롤바의 위치를 가져오거나 설정을 해야할때 useRef를 사용합니다. 자세한 설명은 React 공식 문서에서 확인 가능합니다. https://ko.reactjs.org/docs/hooks-reference.html#useref useRef 사용해보기 User.js App.js 초기화 버튼을 눌렀을때 이름 input에 포커스가 잡히도록 하는 예제입니다. 이번 예제는 velopert님의 예제를 참고했습니다. https://velopert.com/ VELOPERT.LOG react-redux v7.1 alpha 에 드디어 Hooks 기능이 지원되었습니다. 아직 alpha 이기에 프로덕션에서 사용.. [React] useEffect useEffect useEffect는 컴포넌트가 렌더링 이후에 특정 작업을 수행하도록 설정 할 수 있습니니다. 자세한 내용은 React 공식 문서에서 확인 가능합니다. https://ko.reactjs.org/docs/hooks-effect.html [Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org](https://ko.reactjs.org/docs/hooks-effect.html) useEffect 사용해보기 Example.js App.js 실행화면 +1 버튼을 누르면 값이 변하고 리렌더링이 됩니다. useEffect가 리렌더링될 때 마다 실행되는것을 확인할 수 있습니다. 전체 소스.. [React] useMemo useMemo 성능을 최적화하기 위하여 연산된 값을 useMemo를 이용하여서 재사용하도록 하는 Hook입니다. React의 공식문서에는 다음과 같이 나옵니다. https://ko.reactjs.org/docs/hooks-reference.html#usememo [Hooks API Reference – React A JavaScript library for building user interfaces ko.reactjs.org](https://ko.reactjs.org/docs/hooks-reference.html#usememo) 즉 성능 최적화를 위해서 사용 할 수 있지만, 보장이 되어 있지는 않다는 것입니다. 평균 값을 계산하는 예제를 살펴보겠습니다. useMemo를 사용하지 않을 때 Avg.js a.. [React] useCallback useCallback react에서 컴포넌트가 리렌더링되면 함수들이 새로 다시 만들어집니다. 함수를 선언하고 하는 것은 리소스를 많이 차지하지는 않지만 최적화를 위해서는 props가 바뀌지 않을때 Virtual DOM 에 새로 렌더링을 하지 않고 컴포넌트의 결과물을 재사용하는 부분도 중요합니다. useCallback 사용법 Input 값 추적하기 Input.js Input으로 입력받은 값이 변할때마다 컴포넌트는 리렌더링되는데 이럴때마다 함수가 재 선언되면 리소스의 낭비가 생길겁니다. useCallback을 이용해서 함수를 재선언하지않고 재사용 하도록 하였습니다. App.js 실행화면 전체 소스코드는 Github에서 확인 가능합니다 https://github.com/hanhyung6376/learn-rea.. [React] useState useState 리액트에서 컴포넌트는 한 번 렌덩이되고 끝나지 않습니다. 리액트의 컴포넌트는 실시간으로 계속 렌더링되는데 일반 변수를 사용하면 성능의 저하를 불러올 수 있습니다. 리액트의 컴포넌트에서 상태를 관리하는 방법 중 하나로는 useState가 있습니다. useState는 유동적으로 변경될 값을 관리할 때 사용이 됩니다. useState 사용해보기 Counter 구현 Counter.js 초깃 값을 0으로 설정을하고, 버튼을 누르면 증감이 되도록 하였습니다. App.js 실행화면 Random 구현 Random.js Counter와 마찬가지로 초기 상태는 0으로 설정을 하고 버튼을 누르면 값이 랜덤으로 변하게 구현을 했습니다. App.js 실행화면 Github: https://github.com/ha.. [백준] 1922. 네트워크 연결 - 파이썬 풀이. 최소 신장 트리 알고리즘인 크루스칼 알고리즘을 이용해서 풀면된다. 최소 비용을 구해야하는 문제이니 cost를 기준으로 graph를 정렬 시킨 후 크루스칼 알고리즘을 이용하면 어렵지 않게 풀 수 있다. 최소 신장 트리 알고리즘이 가물가물해서 한번 풀어봤다. 소스코드. " target="_blank" rel="noopener">https://gist.github.com/hanhyung6376/f6622fd34ba8c968bc12afce179c4d80.js"> [React] 외부 라이브러리 없이 캘린더 구현 React만을 사용해서 캘린더를 구현하였습니다. 날짜 계산은 내장 모듈인 Date를 사용하여서 구현을 했습니다. 우선 프로젝트 구조는 다음과 같습니다. 구현한 기능 캘린더 화면 최상단에 연도 및 월, 이동 버튼 표시 7 x n(week) 형태의 격자로 표시 캘린더 상단에 요일을 일월화수목금토 순서로 표시 주말은 빨간색으로 표현 이전, 다음달의 날짜는 흐리게 표현 월, 년도 이동 기능 내장 함수 Date를 이용해서 버튼 클릭 시 증감 방식으로 구현 일정 입력 해당 날짜 클릭 시 모달 창에서 일정, 일정 색상을 입력을 받고 해당하는 날짜의 칸에 일정 추가 색상 선택 모달 창에서 원하는 일정의 백그라운드 색상 선택 가능 2일 이상의 일정 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현.. 이전 1 2 3 4 ··· 30 다음
