read 프로퍼티 부분에서 resolve() 메소드를 통해 그리드에 들어갈 데이터를 읽어들인다. 데이터는 state 로 관리되며, 현재는 더미 데이터라 해당 컴포넌트에서 배열 형태로 곧바로 가져온다. (추후에 api 호출할 예정) 문제 최초 렌더링시 탭(tab)의 조건에 맞는 데이터만 출력되는 것이 아닌, 모든 데이터가 쏟아져나온다. (= 즉 최초 렌더링 시에는 필터가 적용되지 않았다.) 하지만 기획자가 원하는 것은, 최초 렌더링시에도 조건에 맞는(=미전송) 데이터를 보내는 것. jsx 부분에서 조건을 걸어 쉽게 처리할 수 있을거라 생각했는데, 회사 자체 프레임워크 구조상, 탭이 변경될 때마다 그리드 초기화 로직이 함께 돌아버린다. 즉 탭이 변경될 때마다, '미전송'으로 필터 건 데이터로 초기화 된다는 ..

리액트에서 Key 값이 필요한 이유 Each child in an array should have a unique “key” prop. 배열에 map() 함수를 적용할 때, 각 요소마다 고유 key 값을 생략한다면 위와 같은 경고를 볼 수 있습니다. 물론 렌더링엔 전혀 문제없습니다. 공식문서에 의하면, Key는 1. React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕고, 2. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. “keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the arr..

문제: useResetRecoilState 를 함수 내 메서드에서 선언했더니, invalid hook call 문제 발생 원인: hooks 는 function component 내부에서만 선언 가능하다. 이번 경우엔, component 영역이 아닌, onInput 이라는 함수 영역 내에서 선언했기 때문에 hooks의 규칙을 위반한다. 해결: component 내부에 useResetRecoilState();를 다른 변수에 할당하여, onInput() 함수 내부에서 사용한다. 오류 코드 const onInput = (e: React.ChangeEvent) => { const input = e.target.value.toLowerCase(); useResetRecoilState(selectedContact);..

cra 형태로 github에 push된 리액트 프로젝트를 netflify 에서 배포해보겠습니다. 깃허브 레포에 저장된 react 프로젝트의 폴더 (e.g: src, public ...)가 repository의 최상위에 위치해 있어야합니다. (상위 디렉토리가 존재하지 않아야 함) 1. netlify - github 계정으로 가입 2. New site from Git 아이콘 클릭 3. Github 선택 4. 본인 레포지토리에서, 배포하고자 하는 리액트 레포지토리를 선택합니다. 5. 아래의 내용을 기입합니다. 브랜치는 master로 잡습니다. Build command: yarn build Publish directory: /build 6. Production deploys 에서 배포하려는 Production ..

State is immutable, that's the rule of redux. Mutaion in state is not recommended. Instead mutating the state, just return another object. for example using filter method in array state is a. good method to delete some elements in array. Because filter() method just return a new state(array) instead mutate a state. Redux is just a function. Dispatching actions, and modifying the data(states) thr..

리액트 - 중첩된 객체 state 변경하기 일반 state는 setState를 통해 가볍게 state 수정이 가능하지만, 아래와 같이 중첩된 state의 경우엔 setState만으로 값이 변경되지 않습니다. this.state = { tempList: { List1: [], List2: [], List3: [] } }; state의 List1, List2, List3 ... 같이 중첩된 객체의 state를 변경하려면, 단순 setState만으로는 한계가 있습니다. 이는 setState의 비동기성으로 인해 발생하는 상황인데, setState와 함께 업데이트 함수를 이용하여 state 값을 변경시킬 수 있습니다. const newList = [1, 2, 3] this.setState(prevState => ..

리액트는 state가 변화할 때마다 매번 render가 작동됩니다. setState함수는 state의 상태를 변화시키기 때문에 component를 re-render하게 되는데, 종종 setState를 했음에도 값이 변하지 않는 상황을 마주하곤 합니다. 문제 setState를 사용하면 state의 상태변화가 한템포씩 늦는 경우를 종종 보게된다. 먼저 흔히 겪는 setState의 문제점을 코드로 보겠습니다. this.state.value = 1; this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value + 1 }); // +1 this.setState({ value: this.state.value ..

리액트를 사용하여, 아래와 같은 배열 객체를 브라우저에 렌더링 하는 법을 배워보자. // Friends 배열 const Friends = [ { key: 1, name: 'Lim', hobby: 'crossfit', info: 'busan', brand: 'nike' }, { key: 2, name: 'Kim', hobby: 'soccer', info: 'ulsan', brand: 'UA' }, { key: 3, name: 'Him', hobby: 'basketball', info: 'tokyo', brand: 'adidas' } ]; class App 한줄 한줄 다 뜯어보자 import Reat, {Component, Fragment } from 'react'; // Component, Fragment..

*foodILike array는 맨 밑에 첨부 함수형 컴포넌트와 클래스형 컴포넌트 구분 : return과 render array를 iter할 때 map()메서드를 사용 props의 타입 체크는 propTypes 메서드 사용 state를 직접 변경하면 render 호출에 문제 생기기 때문에, setState()를 사용하여 state를(데이터를) 변경해준다 class App extends Component { render() { return ( {/* map함수가 없었다면, 일일이 foodILike의 원소들을 기입해야한다.*/} {foodILike.map(dish => ( ))} ); } } 여기서, dish는 임의로 지은 이름으로, foodILike 배열의 각 element를 한 번씩 방문하는 object..