본문 바로가기
Hello! I'm haein, a junior front-end developer. Welcome to my space.
간단한 자기소개 '◡'
안녕하세요. 정리하는 것이 주특기이고, 인문논술로 대학을 가서 나름 글쓰기에 자부심(?)이 있는 주니어 개발자입니다. 개발 공부를 하면서 좀 더 정돈된 기록을 해보고 싶어서 블로그를 시작하게되었습니다. 게시글 하나하나 정말 정성스럽게 열심히 썼구요. 되도록이면 공식문서를 참고해서 객관적이고 정확한 정보를 작성하려고 노력했습니다. 그리고 제가 이해가 될 정도로 디테일하게 서술해서 웬만한 사람들도 이해가 가능할 것이라는것이 저의 뇌피셜입니다. 아무쪼록 저의 글을 읽는 사람들이 어떤 방향으로든 도움이 되셨으면 좋겠습니다. 참고로 연보라, 연핑크를 좋아하구여, 그라데이션도 좋아합니다. 그래서 내 취향에 맞게 커스텀 했습니다 ㅎㅎㅎ MBTI는 ISTJ입니다. 너무 TMI라서 toggle로 해뒀습니다. 궁금한 사람들은 펼쳐보시겠죠?

useState

 (3)
[React] useReducer로 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReduer를 사용해서 복잡한 상태변화 로직을 컴포넌트로부터 분리하기 useReducer 위 사진에서 보다시피, App.js 컴포넌트 안에 굉장히 많은 상태변화함수 (onCreate, onEdit, onRemove)가 존재하는 상태이다. 그리고 이 상태변화함수들은 컴포넌트 내에만 존재해야만한다. 상태를 업데이트 하기 위해서는 기존의 상태를 참고해야하기 때문이다. 그런데 컴포넌트의 코드가 길어지고 무거워지는건 결코 좋지 않다. 그래서 복잡하고 긴 상태변화 로직을 컴포넌트 바깥으로 분리해야한다. 그때 사용하는 것이 useReducer이다. 위 사진에는 useState만 사용해서 1부터 10000까지 각각 더할 수 있는 Counter가 있다. 그리고 10, 10, 100, 1000, 10000을 더할 수..
[React] 데이터 추가하기, 배열 리스트 만들고 추가하기 (일기장 만들기 4탄) 코드가 1탄부터 이어지기 때문에 1탄부터 보고 오셔야 합니다~! 1탄 https://dev-ini.tistory.com/73 - 추가, 수정, 삭제와 같은 이벤트들은 setData 같은 함수를 props로 전달해서 아래에서 위로 올라가는 구조이다. - 에서 새로운 일기를 작성하면 "생성"이라는 이벤트가 발생한다. - 이벤트는 에서 전달한 상태변화함수(setData)를 호출해서 data를 변화시킴으로써 이뤄진다. - data는 위에서 아래로만 움직인다. - data가 변화하게 되면 다시 아래로 떨군다. 위의 설명을 토대로 일기장 리스트 추가 기능 구현해보기 App.js import './App.css'; import DiaryEditor from './DiaryEditor/Diary..
[React] 데이터 리스트 렌더링 (조회) (일기장 만들기 3탄) 코드가 1탄부터 이어지기 때문에 쭉 보고 오셔야합니다~ 1탄 https://dev-ini.tistory.com/73 { return ( 일기 리스트 ); } export default DiaryList; 2. App.js에서 컴포넌트를 불러온다. App.js import './App.css'; import DiaryEditor from './DiaryEditor/DiaryEditor'; import DiaryList from './DiaryList'; function App() { return ( // 컴포넌트를 불러온다. ); }; export default App; 3. 리스트 데이터를 만든다. App.js import './App.css'; import DiaryEditor from './Diary..

티스토리툴바