알다가도 모를

Introducing Hooks(번역문)란 글이 있었고 반박으로 The Ugly Side of React Hooks(번역: React Hook의 어두운면)란 글이 나왔으며 그 번역문을 보고 작성했습니다. 훅에 관한 건 요새 뜨거운 감자로 보입니다. 이걸 도입하는 게 타당한 트레이드인지 따지기 어렵다는 방증으로 보입니다. 훅에 맘에 안 드는 점이 있긴 한데 까더라도 제가 까고 싶어서 올려봅니다. 글쓴이가 훅을 잘 서술했다고 생각하지 못했거든요. 언젠가 봤다가 언어장벽으로 반 정도 읽다가 말았는데 역자분의 고생을 생각해봅니다. 이유 1: 클래스는 헷갈린다 hook 함수는 클래스가 아니며, 함수와 클래스의 그 중간 어딘가에 있는 것이다 타당한 지적입니다. 훅은 그 자체로 필요한 제반 지식이 상당하고 언어 차원..

로딩 스피너 컴포넌트를 만들 때 고려할 점, 가능한 방법을 생각해 보았다. 이중 제출 방지 submit 버튼을 두 번 눌러 요청을 중복하는 걸 방지해야 한다. div를 늘려 오버레이하는 게 가장 간단해 보인다. 더 철저하게 하자면 axios 사용 층에서 배타적으로 요청하는 유틸리티를 추가할 수 있을 듯하다. 서버도 결국엔 CSRF 토큰을 사용하게 될 텐데 이것도 이중 제출 문제를 완화할 수 있을 것으로 보임. 재활용 방법 비교 MobX 현재 사용 중이고 간단함 단점을 들자면 라이브러리 의존성 @inject('applicationStore') @observer class SubmitForm extends React.Component { showLoading() { this.props.applicationS..

최근 참여한 프로젝트에서 리액트를 사용하고 있고 관습으로 클래스 컴포넌트를 사용하고 있었습니다. 저는 리액트 훅을 최근에 알게 되어 그걸 사용하고 싶었고 그 장점을 소개할 기회를 얻었습니다. 훅Hook은 무엇인가? 상태와 생명주기에 엮인 부수효과를 관리하는 새로운 방법입니다. 즉 기존의 this.state와 componentDidMount()등의 사용을 대체합니다. 믹스인, HOCHigher order component를 대체할 수 있습니다. Redux, MobX와의 관계는? 거의 별개라고 할 수 있습니다. MobX와 Redux 둘 다 상위 컴포넌트에서 스토어라는 트리 범위의 상태를 관리합니다. 이건 리액트에선 컨텍스트를 통해 관리할 수 있고, 훅의 useContext를 통해 컨텍스트도 접근할 수 있으므..