농's 개발 공부 이야기

작업을 하다 보니 다음과 같은 상황이 발생했다. usestate를 사용해서 state를 선언한 후 setState로 값을 변경하고 그 변경한 값을 바로 이용해서 다른 값을 바꿔 줘야 하는 상황이 생겼다. 이 부분에 있어서 React가 익숙하신 분들은 바로 어떤 상황인지 감이 잡히고 어떻게 대처하면 되는지도 바로 떠오르시겠지만 나는 React가 익숙하지 않았기 때문에 여러 자료들을 찾아보게 되었다. 먼저, 작업하던 상황은 다음과 같았다. (실제 작업한 코드와 비슷하게 작성한 코드이다.) const doing = async (params) => { const [finalDate, setFinalDate] = useState([]);//array 값의 state const [startDate, setStart..

게시판을 만들다 보니 등록일을 출력할 형식이 필요했다. 물론 일반적으로는 yyyy-mm-dd로 사용하겠지만 주 이용자가 한국인이기 때문에 시간의 형식을 '-년 -월 -일 -시 -분'의 형식으로 출력하고 싶었다. 이를 위해서 여러 자료들을 찾아보니 Moment.js를 사용하면 간편하게 될 것 같았다. Moment.js는 시간이 포함된 데이터를 받아서 조작할 경우 사용 가능한 라이브러리 중 하나이다. SETUP //Moment 라이브러리 설치 npm i moment HOW-TO import Moment from 'moment'; const changeTime = (record) => { const createdTime = Moment(record.createdAt).format('YYYY년 MM월 DD일 H..

Columns dataindex: DB의 필드와 매핑해 주는 역할. Pagination 'pagination={}'에 대해 따로 정의하지 않으면 기본적으로 pagination 아래와 같이 제공한다. 그러나 보다시피 기본 세팅이 중국어이기 때문에 바꿔주기 위해서는 다음과 같이 사용하는 것을 추천한다. pagination={{ showTotal: (total, range) => ( {`총 ${total} 중 ${range[0]}-${range[1]} `} ), }} *참고) stackoverflow.com/questions/62229953/change-ant-design-pro-table-pagination-language 이런 방식으로 작성하면 아래와 같이 사용 가능하게 된다. 이 때, backend에서 ..

Hook - class 컴포넌트를 작성하지 않아도 state 같은 기능들을 사용할 수 있게 해 준다. - 함수 컴포넌트에서 React state와 생명주기 기능을 연동할 수 있게 해 주는 함수이다. - 함수 컴포넌트는 기본적으로 state가 없는 컴포넌트이지만 hook은 react state를 함수 안에서 사용할 수 있게 해 준다. - class 안에서는 동작하지 않지만 class 없이 React를 사용할 수 있게 해 준다. - 관련 있는 코드들을 한군데에 모아서 작성 가능하게 해 준다. class에서는 lifecycle method 각각에 코드들을 쪼개서 넣어야 한다. => 즉, Hook이란 state가 없는 함수 컴포넌트에서 class의 작성 없이도 state를 사용 할 수 있게 해 주는, 그래서 코..