200326 TIL 리액트스터디 - 매출관리 프로그램

Mar 26, 2020 » 1.5막, TIL (Today I Learned), 스터디, React.js

리액트스터디 - 매출관리 프로그램

리액트 스터디에서 매출관리 프로그램을 만들어보기로 했다. 1차로 기능 구현만 했다. (기본적인 CRUD..)

아래처럼 코드를 짰는데

{data.map(item => (
    <tr key={item.SALE_DATE}>
        <td>{item.SALE_DATE}</td>
        <td><FormControl onChange={(e) => {handleInput(e, item.SALE_DATE, 'TABLE_COUNT');}} size="sm" type="number"
                         value={item.TABLE_COUNT}/></td>
        <td><FormControl onChange={(e) => {handleInput(e, item.SALE_DATE, 'CARD_SALES');}} size="sm" type="number"
                         value={item.CARD_SALES}/></td>
        <td><FormControl onChange={(e) => {handleInput(e, item.SALE_DATE, 'CASH_SALES');}} size="sm" type="number"
                         value={item.CASH_SALES}/></td>
        <td><FormControl onChange={(e) => {handleInput(e, item.SALE_DATE, 'SERVICE_SALES');}} size="sm"
                         type="number" value={item.SERVICE_SALES}/></td>
        <td>{calcTotalSales(item.SALE_DATE)}</td>
        <td>{calcPerSales(item.SALE_DATE)}</td>
        <td onClick={() => {removeDate(item.SALE_DATE);}}> -</td>
    </tr>
))}

함수 호출 리턴값을 바로 렌더링 하는 과정에서 렌더링이 불필요하게 두 번 일어나서 연구가 필요하닷

이 스터디에서 토론하다가 나온 의견인데, styled-component는 여러모로 불편한데 왜 쓰는 것일까? 를 생각해보았다. 여러 의견 중, react 철학이 컴포넌트 베이스니까 패러다임 자체를 컴포넌트 단위로 하려고 나온거 아닐까? 라는 의견에 굉장히 큰 공감을 하게 되었다.