웹 프로그래밍/React (9) 썸네일형 리스트형 [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일 이상의 일정 모달 창에서 종료일 설정 체크박스 클릭시 종료일을 입력받는 방식으로 구현.. [React] withRouter를 이용한 링크 이동시 메뉴변경 링크 이동으로 메뉴 변경 react를 이용하여 특정 링크로 이동하여 상단 메뉴 콘텐츠 내용을 변경하는 작업을 해보겠습니다. 우선 리액트 앱을 만들어줍니다. yarn create react-app withrouter-ex 그리고 scss와 react-router-dom을 사용할 예정이니 라이브러리들을 설치해줍니다. yarn add react-router dom node-sass@5.0.0 다 완료가 되었다면 src 폴더 안에 containers와 components폴더를 만들어줍니다. containers 폴더에는 Default.js, Home.js, Menu.js, Profile.js 를 생성해줍니다. Home.js Menu.js Profile.js Default.js는 나중에 작업을 하도록 하겠습니다. .. [ReactJS] JSX JSX란? 자바스크립트의 확장 문법으로 XML과 매울 비슷하게 생겼으며, 이런 형식으로 작성한 코드는 브라우저에서 실행되기 이전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형식으로 변환된다. -JSX 예제 ● JSX의 장점 - 가독성이 좋고 익숙하다. HTML코드와 비슷하기때문에 가독성도 좋으며, 읽기도 쉽다. - 높은 활용도 HTML 태그 뿐만이 아니라 컴포넌트 또한 JSX 안에서 작성할 수 있다 ex) 이전 1 2 다음
