Grand_J

Mobx Redux 비교 예제http://woowabros.github.io/experience/2019/01/02/kimcj-react-mobx.htmlhttps://afrobambacar.github.io/2018/11/redux-or-mobx.html https://brunch.co.kr/@hee072794/108https://www.slideshare.net/hyunseoblee7/mobx-mst-state-management-109460634https://velog.io/@velopert/redux-or-mobx Redux, Flux 개념https://taegon.kim/archives/5288https://engineering.huiseoul.com/react-redux-intro-bbff95..

리액트 드래그드랍 예제https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/about/examples.md

Mobx 예제 https://velog.io/@velopert/MobX-2-%EB%A6%AC%EC%95%A1%ED%8A%B8-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-MobX-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-oejltas52z

React Component 종류 기본 컴포넌트 (Basic Component) 함수형 컴포넌트 (Functional Component) 고차 컴포넌트 (Higher Order Component) 무 상태 컴포넌트 (Stateless Component) 특수화 (Specialization) 기본, 함수형 컴포넌트를 많이 쓰는 듯 참고https://medium.com/little-big-programming/react%EC%9D%98-%EA%B8%B0%EB%B3%B8-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A5%BC-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90-92c923011818

React map 사용시 onClick으로 데이터,파라미터 값 함수로 전달 하기 this.state.list.map( board => { return {this._checkState(e, {board})} } /> }) // 함수_checkState = (e, board) => { console.log(board); } 끘!@#!#$@#$%@

자바스크립트(Javascript) 내장 객체 배열(Array)의 내장 함수 concat, filter, map 사용법 데이터 추가 concat 데이터 삭제 filter 데이터 for문? map //데이터 추가 concat const { users } = this.state; this.setState({ // 아이디를 비교하여 같지 않으면 데이터를 넣어라 users: users.concat({ id: this.id++, ...data }) }) // ...data 는 이전 데이터 상위에 추가 //데이터 삭제 filter const { users } = this.state; this.setState({ users : users .filter(info => info.id !== id) }) // 배열 데이터 ..

React state 값 하위 컴포넌트 > 상위 컴포넌트 , 상위 컴포넌트 > 하위 컴포넌트로 전달 방법 ------------------------------하위 컴포넌트 > 상위 컴포넌트// 하위 컴포넌트 // 상태값을 onCreate 를 통하여 부모에게 전달 this.props.Test(this.state); // 부모 컴포넌트 handleTest= (data) => { console.log(data); } ------------------------------상위 컴포넌트 > 하위 컴포넌트// 부모 컴포넌트// setState에서 state 추가가 발생 감시 handleCreate = (data) => { const { information } = this.state; this.setState({..

React setState시 state 데이터 사용법 // 1. this.setState({ number : this.state.number+1 }) //2. this.setState( (state) => ({ number: state.number }) ); // 3. 비구조 할당 방식 this.setState( ({ number }) => ({ number: number + 1 }) ); //4. const { number } = this.state; this.setState({ number: number + 1 }); 위 코드 다 사용 가능한데간단한게 4번째 코드임 참고 : https://velopert.com/3629 끘

React setState 시 하위 객체가 존재 할 경우 setState는 객체로 전달되는 값만 업데이트 함 아래 state 데이터 경우 state = { number: 0, user: { id: 'admin', pw: '123' } } 아이디를 setState하고 싶을 때안됨 XXXXXXXXXXXXXXXXXXXXXXthis.setState({ user: { id: 'test' }})pw 데이터가 날라가 버림 number: 0, user: { id: 'test' } 때문에this.setState({ number: 0, user: { ...this.state.user, id: 2 }}); 이케 해야되는데 이해가 그래도 잘 안되네 ㅆㅂ난 망한듯 참고 : https://velopert.com/3629 끘!@$..

React State 정의 차이점 // class fields 사용했을 경우class Test extens Component {state = {number: 1}handleIncrease() { this.setState({ number: this.state.number + 1 }); }...} // constructor 사용했을 경우class Test extens Component {constructor(props) { super(props); this.state = { number: 1 }this.handleIncrease = this.handleIncrease.bind(this);}handleIncrease() { this.setState({ number: this.state.number + 1 })..