React.js/[React] Dreamcoding11 데이터, 콜백함수를 props로 전달하는 과정. 2020. 10. 27. [4 - 12] Add Form 만들기 (Refs 이용) ★inputRef = React.createRef(); 리액트에서만 사용될 수 있다. 기존 HTML 자바스크립트 방식은 DOM을 가지고 사용하지만 리액트에서는 DOM을 조작할 수 없기 때문에. 1. 최상위 컴포넌트 habits 안에서 자식에게 전달할 콜백함수를 만든다. handleAdd = name => {} 2. 이때 인자로 name을 받아오게 만든다. 그리고 받아온 name을 state에 있는 habits 프로퍼티 안에 name이라는 키값에 전달한다. 3. 만들어진 콜백함수 handleAdd를 props "onAdd" 로 자식 컴포넌트 Habits에게 전달한다. 4. Habits 컴포넌트에서 다시 자식 컴포넌트 HabitAddfrom에게 props "onAdd"로 전달하기 위해 다시 한번 콜백함수(h.. 2020. 10. 27. [4 - 9] 이벤트 처리하기 (state 업데이트) ★ porps는 데이터와 콜백함수도 자식 컴포넌트에게 전달할 수 있다. ★habit컴포넌트의 부모 habits 안에 있는 데이터에 맞게 자식 컴포넌트의 데이터가 표기가 되고 클릭 이벤트가 발생하면 자체적으로 처리하는 것이 아니라 전달된 props에 있는 콜백함수를 이용해 결국은 부모함수에 있는 콜백함수를 호출하는 것이다. ★state는 부분적으로 업데이트될 수 없고, 전체적으로 업데이트를 해주어야 한다. hnadleIncrement 함수 정리: const habits = [...this.state.habits] ← state에 habits이라는 배열 안에 3개의 오브젝트를 그대로 복사. const index = habits.indexOf(habit); ← 클릭했을때 habits안에 오브젝트 중 클릭한 것.. 2020. 10. 26. [4 - 7] state 이해하기, list key ** state값을 바꿀 때 "직접적(부분적)"으로 바꾸면 리액트는 바뀐 데이터를 감지 못한다. 그렇기 때문에 항상 "전체적인" state를 업데트 해주어야 한다. ** 모든 리스트에는 고유의 key값을 설정해주어야 하는데 이때 인덱스 번호로 설정하면 절대 안된다! 2020. 10. 26. [4 - 2] Yarn으로 프로젝트 만들기 내가 현재 사용하는 커맨드(명령 프롬트) 툴은 윈도우용 "cmder"이다. ** 기본 디렉토리 세팅은 내가 만들어둔 마스터 디렉토리로 경로를 세팅해준다. 그 후 하위 디렉토리로 프로젝트 폴더들을 만들어 프로젝트를 진행한다. ** 기본적인 커맨드 명령어들: cd: 현재 디렉토리 이름을 보여주거나 바꾼다. 다른 디렉토리로 이동할 수 있다. (cd .. 는 상위 폴더로 이동시켜준다.) cls: 화면을 지운다. dir: 디렉터리에 있는 파일과 하위 디렉터리 목록을 보여준다. mkdir: 디렉터리를 만든다 rename: 파일 이름을 바꾼다. 1. cmder에서 프로젝트를 생성하고자 하는 master 디렉토리로 이동한다. yarn create react-app 폴더명(영어) 터미널은 항상 2개를 열어둔다. a. c.. 2020. 10. 26. 이전 1 2 다음
