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

리액트 리스트 렌더링

 (3)
[React] map과 find를 사용해서 데이터 리스트 렌더링 하기 목차 1. map을 사용하여 렌더링 하기 2. 리스트가 따로 컴포넌트로 분리 됐을 경우에 map을 사용하는 법 3. find를 사용하여 렌더링 하기 4. 컴포넌트로 분리 됐을 경우에 find 사용하는 법 map과 find를 사용해서 데이터 리스트 렌더링을 해보자! 1. map을 사용하여 렌더링 하기 (1) 기본적인 마크업을 하고, 데이터 리스트를 작성한다. List.jsx (페이지) import "./List.css"; const List = () => { const dummyList = [ { id: 1, title: "1번 게시글", }, { id: 2, title: "2번 게시글", }, { id: 3, title: "3번 게시글", }, { id: 4, title: "4번 게시글", }, { id..
[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..

티스토리툴바