고오급 개발자가 되는길

const mapStateToProps = state => { return { darkMode: state.darkMode } } // redux에 담겨 있는 state를 사용하기 위한 map 설정 const mapDispatchToProps = dispatch => { return { changeTheme: () => dispatch(this.props.changeTheme()) } } // redux에 담겨 있는 dispatch를 연결해주기 위한 map 설정 export default connect( mapStateToProps, mapDispatchToProps )(ContentItem) // 위에서 설정한 두개의 map을 연결하기 위한 connect 설정 참고 : https://react.vlpt..

const groupBy = function (data, key) { return data.reduce(function (carry, el) { var group = el[key]; if (carry[group] === undefined) { carry[group] = [] } carry[group].push(el) return carry }, {}) } const groupByData = groupBy(key값으로 묶을 배열, "name")

React.memo() 란 - React는 컴포넌트를 렌더링 한 뒤 이전 렌더 결과를 비교하여 DOM의 업데이트를 결정한다, 이전의 상태와 다르다면 DOM을 업데이트 하는 방식의 렌더링 형식이다 하지만 컴포넌트가 React.memo()로 래핑 될 떄, React는 컴포넌트를 렌더링 하고 결과를 메모이징 한 후 다음 렌더링이 일어날떄 props가 같다면 기존에 메모리잊 한 내용을 재사용 하여 무분별한 리렌더링을 방지할 수 있다. 사용법 ``` function arrEqual(pre, next) { return ( pre.from === next.from && pre.to === next.to ); } // true 반환 시 메모이징 된 렌더링 재사용 export default React.memo(HostC..

React 환경에서 이벤트 핸들러 전달 시 유의 사항 컴포넌트 인스턴스로 이벤트 핸들러 전달 시 렌더링마다 함수가 호출되지 않도록 함수를 호출하여 인스턴스로 주지 말고 함수 선언 그대로 만 인스턴스로 넘겨주어야 한다. EX) const eventHandler = () =>{ 일어날 event } // eventHandelr() 함수 호출을 하지않고 핸들러를 넘겨준다. 이벤트 핸들러를 props로 받은 하위 컴포넌트는 해당 이벤트 핸들러를 호출하기 위해서는 함수 호출을 진행하여야 한다. const Component = (props) =>{ componentEventHandelr(){ props.eventHandelr() } } 하위 컴포넌트에서 이벤트 발생(onClick,onChange 등) 시 이벤트 핸..