[React] eyecount — 재무재표

  • 이것은 본인이 프로젝트를 진행할때 틀렸던 부분에 대해 수정하고, 풀이해던 과정 또는 결과를 작성한 개인 Medium 입니다.
    (본인이 아직 초보이고 용어나 설명에 모르는것이 많습니다. 지금은 한번더 상기 시키기에 글 작성중, 나중에라도 지식이 쌓인다면 꼭 수정하길 바랍니다.)

React Component 안에 state,proptypes,function 이외 this를 쓸수있는 함수를 작성할수 있습니다.

// 손익계산서 초기값
initIncomeStatementOptions = {
hasDiffDates: true,
isAllBizUnits: false,
disabledBizUnitRegister: true,
};
// 조회 시작일이 있는 재무제표 종류
hasStartDateFinancialTypes = ['INCOME_STATEMENT'];

// 재무제표 사업단위 있는 재무제표 종류
hasBizTypeFinancialTypes = ['INCOME_STATEMENT'];

React Component 안에 state,proptypes,function 이외 this를 쓸수있는 함수를 작성할수 있습니다. 이 경우 setState로 변경하지않고 this.functionName으로 손쉽게 컨트롤 또는 사용 할 수 있습니다.


개발자를 처음 할때 어려웠던 테이블 추가/삭제 부분입니다.

// 테이블 추가
handleAddDate = () => {
this.setState({
dates: [...this.state.dates, { start: null, end: null }],
});
};

// 테이블 제거
handleRemoveDate = index => {
this.setState({
dates: this.state.dates.filter((n, i) => i !== index),
});
};

날짜를 추가하는 이벤트 이다.
dates에는 start,end 두개의 key,value값이 있을경우, 
setState를 이용하여 기존데이터에 기존Key 배열을 넣고 
추가될 빈값들을 넣어준다면, 
render에서 반복되고있는 데이터에 추가될것이다.

반대로 삭제 이벤트의 경우에는
해당 이벤트의 map이나 for의 아이템의 index를 넘겨 받아,
(현재 dates의 값들중 넘겨받은 index를 제외한 모든 dates를 반환)
처리한다.


팁!
state에 여러개의 관리되고있는 값들이 있을경우

state = {
item: '',
item2: [],
item3: {},
item4: null,
};

어떤 이벤트의 변수를 state로 한다면

handleFinancialChange = e => {
let state = {
item1,
item2,
item3
};
}

등 let 자체를 state로 해준다면

this.setState(state);

한번에 setState로 처리 할 수 있다.


…연산자 기억하기

...state,

해당 배열의 값들을 한번에 넘겨 받거나 선언하기

state = {
...state,
...this.handleEvent,
};

등 key,value를 하나하나 선언할 필요없이 한번에 선언 할 수 있습니다.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.