본문 바로가기

Library | Framework22

[React] 클래스 스타일 vs 함수 스타일 서론 저번 글까지 CRUD를 구현하면서 컴포넌트를 class 스타일로 만들었었다. 하지만 최신 리액트에서 함수 스타일에도 훅(hook)이라는 개념이 도입돼 클래스 스타일과 대등한 존재로 격상했다. 대부분의 리액트 자료는 클래스 스타일로 설명돼있기 때문에 배우는 것이 좋다고 한다. 과거엔 함수형 스타일에서는 state값을 가질 수 없었음. 프로젝트 만들기 npx create-react-app create-react-app func-class-style cmd 창에 이렇게 입력해주고 새로 만든 프로젝트의 필요없는 index.css, App.css를 모두 주석처리 해준다. 클래스형 스타일에서 state를 사용하는 방법 function App() { return( Hello World ) } 예시로 ClassC.. 2022. 1. 14.
[React] CRU 기능 보완, delete 기능 구현, Redux의 개념 서론 저번 글만 해도 create, read, update 이 세 가지의 기능만 구현했었다. 그래서 오늘은 이전 기능을 조금 보완하고, 마지막 delete 기능을 구현할 것이다. 또, 책에서 배운 redux의 개념을 적어놓으려고 한다! 무엇을 보완할까? 원래 내가 만든 웹에서 create를 하거나 update를 해서 submit 버튼을 누르면 페이지가 그대로 create/update 화면을 보여줬었다. 근데 이러기보다 create/update를 하고나서 바로 그 content를 보여주는 게 훨씬 편할 것이다. 그래서 이번 글에선 create/update를 하고, create/update가 된 content를 보여주는 것을 구현할 것이다. 먼저 mode가 create일 때 setState 함수를 이용해 c.. 2022. 1. 11.