웹 프로그래밍 (22) 썸네일형 리스트형 [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] 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.. [React] 외부 라이브러리 없이 캘린더 구현 React만을 사용해서 캘린더를 구현하였습니다. 날짜 계산은 내장 모듈인 Date를 사용하여서 구현을 했습니다. 우선 프로젝트 구조는 다음과 같습니다. 구현한 기능 캘린더 화면 최상단에 연도 및 월, 이동 버튼 표시 7 x n(week) 형태의 격자로 표시 캘린더 상단에 요일을 일월화수목금토 순서로 표시 주말은 빨간색으로 표현 이전, 다음달의 날짜는 흐리게 표현 월, 년도 이동 기능 내장 함수 Date를 이용해서 버튼 클릭 시 증감 방식으로 구현 일정 입력 해당 날짜 클릭 시 모달 창에서 일정, 일정 색상을 입력을 받고 해당하는 날짜의 칸에 일정 추가 색상 선택 모달 창에서 원하는 일정의 백그라운드 색상 선택 가능 2일 이상의 일정 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현.. Webpack이란 무엇인가 Webpack 이란? 웹팩은 오픈 소스 JavaScript 모듈 번들러로 여러개로 나누어져 있는 파일들을 하나의 JavaScript 코드로 압축하고 최적화 하는 라이브러리이다. . Webpack의 사용 이유 컴파일 속도를 빠르게 해준다. 하나의 js 파일로 만들어서 웹페이즈 성능을 최적화 한다. 로더를 사용할 수 있다. 모듈 단위로 개발이 가능하며, 가독성과 유지보수가 쉬워진다. 최신 JavaScript 문법을 지원하지 않는 브라우저에서 사용할 수 있게 코드로 쉽게 변환 시켜준다. [JavaScript] 파도 효과 구현하기 파도 효과 구현하기 우선 visual studio를 사용한다면 live server 익스텐션을 추가해서 live server 환경에서 실행을 해야합니다. 프로젝트 구조 다음과 같이 구성되어 있습니다. HTML html 같은 경우에는 js, css 파일을 로드하고 다른 요소를 만들지는 않았습니다. CSS css 역시도 설명할게 없습니다. JS Point.js Point.js는 좌표들을 생성합니다. 좌표를 생성하는 이유는 Wave.js에서 Point에서 생성해낸 좌표를 기준으로 라인을 이어야하기 떄문에 좌표를 생성하고 각각의 좌표가 움직이는 speed등을 정합니다. Wave.js Wave.js에서는 Point에서 생성한 각각의 좌표들을 이어 라인을 이어지게하는 역할을 합니다. 반복문을 통해 이전 좌표 값과 .. 이전 1 2 3 다음
