한 입 크기로 잘라 먹는 리액트 공부하기
1.리액트를 배워야 하는 이유
리액트 : 페이스북이 개발한 자바스크립트 오픈소스 라이브러리자바스크립트 개발자들을 대상으로 2016년부터 2020년까지 웹프론트엔드 개발 점유율 1위~2위를 차지할정도로 아주 많이 사랑받고 있음리액트를 배우면 뭘 만들 수 있을까?리액트 파생 기술인 React Nativ
2.자바스크립트 기본(복습)
자바스크립트는?HTML, CSS와 더불어 웹을 개발하는 세 가지 언어 중 하나.HTML은 요소들의 배치와 내용을 기술하는 언어리스트나 제목 배치색이나 크기 등의 디자인 수행XCSS는 색 크기 애니메이션 등을 정의하는 스타일링을 위한 언어요소들 크기와 애니메이션 정의가
3.감정 일기장 만들기 (1) - React에서 사용자 입력 처리하기(useState)
한입에 먹는 리액트의 강의에서 본격적인 프로젝트 수업이 시작됐다. 오늘 배울 것은 React에서 사용자의 입력을 어떤 방식과 코드를 사용하여 해결하는지에 대한 부분이다. 프론트엔드에서 가장 중요한 부분은 사용자의 입력을 처리하는 부분일 것이다. 그 중에서 오늘 배울 방
4.감정 일기장 만들기 (4) - React에서 배열 사용 ( 데이터 추가, 삭제, 수정 )
프로젝트의 컴포넌트와 데이터 구조를 생각해보자<App /> -> <DiaryEditor /><App /> -> <DiaryList />App 컴포넌트가 부모, DiaryEditor가 DiaryList컴포넌트에게 일기 아잉템을 추가해주는게 아니고 S
5.감정 일기장 만들기 (2) - React에서 DOM 조작하기(useRef)
오늘 배울 것은 useRef를 사용하여 React DOM을 조작하는 방법이다. 구체적으로는 말하면, useRef를 사용하여 submit하는 내용이 일정 길이를 넘지 못할 경우 다시 입력하는 동작을 보여준다. submit 이벤트를 담당하는 함수에 작성자 length, 본
6.감정 일기장 만들기 (3) - React에서 배열 사용하기 (리스트 렌더링)
오늘 배울 것은 리스트를 리액트로 어떻게 화면에 렌더링하는 지다. 리스트를 렌더링할 컴포넌트인 DiaryList.js를 만들어준다. 그리고 App.js에 만들고 싶은 리스트 객체를 입력해준다. 입력한 리스트를 DiaryList.js에 prop으로 넘겨줄 것이다.