React (15) 썸네일형 리스트형 컴포넌트 반복 : map() [map() 함수] arr.map(callback, [thisArg]) 1) callback : 새로운 배열의 요소를 생성하는 함수이며, 파라미터는 다음 3가지 - currentValue : 현재 처리하고 있는 요소 - index : 현재 처리하고 있는 요소의 index 값 - array : 현재 처리하고 있는 원본 배열 2) thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스 [컴포넌트 map 예시 1 - key가 없는 경우] : 하단의 예시대로 한다면 키값이 없어 콘솔창에 경고를 출력하게 된다. key • 리액트에서 key는 배열을 렌더링 했을 때 어떤 엘리먼트에 변동이 있었는지 알아낼 때 사용합니다. 1) key가 없으면 - 가상 DOM을 비교하는 과정에서 리스트를 .. ref: DOM [ref:DOM 이란?] jquey에서 이런 식으로 ID값을 가져와 DOM를 직접 핸들링한다. React에서도 DOM를 직접 접근하고 싶을때 사용하는것이 ref DOM 이다. [예시] 컴포넌트에 ref 사용 : 스크롤 박스 조작하기 ( this.scrollBox=ref } } this.scrollBox.scrollToBottom() HTML DOM 에 ref 사용 : 특정 input 에 focus 주기 this.input=ref } /> this.input.focus() : 하단 예시를 보면 input에 입력한 값이 0000이면 텍스트필드의 색상을 lightgreen 아니면 lightcoral 으로 변경한다. 우선 CSS를 만들어준다. [ref 사용 전] [ref 사용 후] Redux Toolkit + Redux Saga 구조 만들어보기(3) - 전체 흐름 설명 내가 작성한 코드에서 검색버튼 이벤트가 발생한 후 흐름을 예를 들어서 설명을 해주겠다. 상단의 소스는 한 화면을 나타내는 소스이다. 이 화면에서 mainSearch() 이벤트가 Toolkit과 Saga를 이용하여 어떤식으로 흘러가는지 알아보자 1. [검색] 버튼을 클릭하게되면 SearchPanel의 mainSearch() 함수를 실행시킨다. 2. mainSearch()에서는 setParam() 를 실행하면서 param state값을 변경해주게 된다. 3. param값이 변경되고나면 param의 변경을 감지하고있는 useEffect(()=>{},[param])가 실행되고 slice에 정의해둔 (import { MasterStopCodeAction } from './slice') MasterStopCodeA.. Redux Toolkit + Redux Saga 구조 만들어보기(2) 설치를 했으면 구조를 만들어 보자 (설치 명령어는 이전 글에 있습니다.) [폴더 구조] 우선 디렉터리 구조를 보면 대표적으로 src/api/ src/components/ src/views/ viewName/ index.js slice.js saga.js src/store/ src/App.js src/index.js 이전에는 actions, reducers, constants 등 각 기능 별로 폴더를 나누었을 것이다. 그러나 redux-toolkit에 createSlice가 actions 와 reducer을 한 방에 만들어주면서 디렉터리 구조가 좀 더 보기 쉽게 구성이 가능해 졌다. 그리하여 views 에 한 화면당 폴더를 만들고(viewName) 그 폴더에 view파일(index.js) + slice(a.. Redux Toolkit + Redux Saga 구조 만들어보기(1) - 개념, 설치 [Redux Toolkit 이란?] 1. Redux Toolkit를 사용하는 이유 Redux Toolkit은 Redux를 더 사용하기 쉽게 만들기 위해 Redux에서 공식적으로 제공하는 개발도구 입니다. Toolkit 없이 Redux를 사용시 문제점 "Redux 저장소 구성이 너무 복잡합니다." "Redux가 유용한 일을하도록하려면 많은 패키지를 추가해야합니다." "Redux에는 너무 많은 상용구 코드가 필요합니다." Ex) --------------------------------------------------------------------------------------------------------------- 1개의 액션 생성을 하기위해선 [액션타입 정의 > 액션함수 생성 -> 리듀서 정의].. React 공식 문서 Hook (2) : Hook 개요 [useState] 상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. - 최초로 렌더링을 하는 동안, 반환된 state(state)는 첫 번째 전달된 인자(initialState)의 값과 같습니다. - setState 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다. 1. hook를 호출하기 2. 함수 컴포넌트안에 state 추가하기 - 이 state는 컴포넌트가 다시 렌더링 되어도 그대로 유지될 것입니다. 3. state 변경하는 함수 실행해보기 -> setCount() - 우리는 이 함수를 이벤트 핸들러나 다른 곳에서 호출할 수 있습니다. - setCount() 는 Class컴포넌트에서 사용했던 this.setState와 비슷하지만 , 이전 .. React 공식 문서 Hook (1) : Hook 소개 [Hook 이란?] Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수입니다. Hook은 class 안에서는 동작하지 않습니다. 대신 class 없이 React를 사용할 수 있게 해주는 것입니다. (React 16.8.0은 Hook을 지원하는 첫 번째 배포입니다. 업그레이드할 때 React DOM을 포함한 모든 패키지를 업데이트하는 것을 잊지 마세요. React Native는 v0.59부터 Hook을 지원합니다.) [Hook을 쓰는 이유] 1. 컴포넌트 사이에서 상태와 관련된 로직을 재사용하기 어렵다. (문제) 기존 class 컴포넌트에서는 이 문제를 해결하기 위해 render props 그리고 고차 .. 이전 1 2 다음
