엄범

 

 

React component

https://ko.reactjs.org/docs/hello-world.html

  • props를 전달 받아 React Element를 반환하는 function 혹은 class
  • state라는 내부 상태를 가질 수 있음
  • props는 react component의 파라미터, state는 react component의 필드라고 생각하면 됨.

 

react state 관리

  • https://ko.reactjs.org/docs/react-component.html
  • ``js this.state``를 직접 변경하면 안 됩니다. 왜냐하면 이후 호출되는 ``js setState()``가 이전에 적용된 변경 사항을 덮어쓰기 때문입니다. ``js this.state``를 불변적(Immutable)인 데이터로 취급하세요.

```js

// 리스트에 추가 삭제

e.currentTarget.checked === true
  ? this.setState(state => ({checkedItems: [...state.checkedItems, divisionRateItem]}))
  : this.setState(state => ({checkedItems: state.checkedItems.filter(x => x !== divisionRateItem)}));

 

// 리스트 안의 원소의 멤버 변수 변경

this.setState(prevState => {
  const state = Object.assign({}, prevState);
  state.divisionRates[i].isChecked = !state.divisionRates[i].isChecked;
  return state;
});

 

// 이건 별로 좋은 방법은 아닌 것 같다. 전체를 리턴 받아야 해서 filter를 못쓰고 map에 다 때려 넣었는데

// 너무 지저분해지고 가독성도 좋지 않다

this.setState(state => ({divisionRates:
        state.divisionRates
            .map(divisionRate =>
                divisionRate === selectedItem 
                    ? {...divisionRate, isChecked: !divisionRate.isChecked} 
                    : divisionRate)}));

 

this.setState(state => ({
    divisionRates: state.divisionRates
        .map(item => Object.assign(item, {isChecked: !!checked}))
}));

```

 

Context 관리

  • React에서 데이터는 props를 통해 위에서 아래로(parent에서 child로) 전달된다.
    • props는 react component의 파라미터라고 생각하면 됨.
  • 그러나 이렇게 top-down 방식으로 데이터를 전파하는 것은 앱이 약간만 규모가 커져도 전달해야 하는 props가 많아지므로... 쓸데없는 props를 단지 전달 목적으로 받는 경우도 있을거고.
  • 그래서 context라는 개념이 도입되었고, context를 이용하면 컴포넌트 트리 전체에 데이터를 제공할 수 있다.
    • 예를들면 로케일, UI 테마 등. 앱 안의 여러 컴포넌트에게 전달해줘야 하는 경우.

 

React Context

https://ko.reactjs.org/docs/context.html

 

MobX

 

기타

profile에 따라 다른 상수 불러오기

```js

// Common.js

export default {

    ...require(`../profiles/${process.env.REACT_APP_PROFILES}`)

}

```

```js

// local.js

export const a = 'constant'

```

빌드 시에 profile을 다음과 같이 넣어주면 해당 프로파일.js 파일의 상수들만 불러올 수 있다.

```js

cross-env REACT_APP_PROFILES=local react-scripts build

```

사용할 때는 Common을 import해서 사용.

 

react에서 POST body는 처리할수 없음.

 

react에서는 DOM element 명 변경

https://ko.reactjs.org/docs/dom-elements.html  

for -> htmlFor / class -> className 으로 변경되는 등.