useRef

[React] 데이터 추가 기능

이 블로그는 유데미 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다! 목차 1. 컴포넌트, 데이터 구조 분석 2. 데이터 추가 1. 컴포넌트, 데이터 구조 분석 현재까지의 프로젝트 진행 상황을 회고해보겠습니다. 먼저 컴포넌트의 구조입니다. 먼저, 최상단에 App 컴포넌트가 있고, 그 아래에 DiaryEditor와 DiaryList를 접근할 수 있습니다. 우리가 지금 작업할 일기 아이템 추가를 통해, DiaryEditor에서 DiaryList로 데이터가 들어가야 할 것입니다. 하지만, 앞에서 조회 기능을 만들 때는 dummyList를 App 컴포넌트에서 만든 후, 이를 props로 DiaryList에 내려줬습니다. 이렇듯 React에서 데이터는 위에서 아래로 데이터를 내려가는 것밖에 ..

[React] React에서 DOM 조작, 데이터 조회 기능 (리스트 렌더링)

이 블로그는 "한입 크기로 잘라먹는 리액트" 강의를 보고 복습하고자 작성되었습니다! 목차 1. useRef로 DOM 조작하기 2. 일기 리스트 렌더링(조회기능) 3. 컴포넌트 분할 1. useRef로 DOM 조작하기 DOM(Document Object Model)이란 문서 객체 모델이라는 뜻으로, 웹 페이지의 요소들을 구조화시켜 접근, 조작할 수 있도록 API를 제공해주는 인터페이스입니다. const handleSubmit = () => { if (state.author.length < 1) { alert('작성자는 최소 1글자 이상 입력해주세요.'); return; } if (state.contents.length < 5) { alert('일기 본문은 최소 5글자 이상 입력해주세요.'); return;..