놀러와요 버그의 숲

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p172 ~p.188 새로 알게된 사실 1. 모든 리액트 컴포넌트에는 라이프사이클(생명주기)이 존재한다. 2. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비과정에서 시작하여 페이지에서 사라질 때 끝난다. 3. 라이프사이클 메서드는 컴포넌트 상태에 변화가 있을 때마다 실행하는 메서드이다. 4. Will 접두사가 붙은 메서드는 어떤 작업을 작동하기 전에 실행되는 메서드이다. 5. Did 접두사가 붙은 메서드는 어떤 작업을 작동 한 후에 실행되는 메서드이다. 6. 라이프 사이클은 총 세가지, 마운트, 업데이트, 언마운트 카테고리로 나뉜다. ※중간정리 마운트 • constructor: 컴포넌트를 ..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p85 ~ p.117 새로 알게된 사실 1. 함수 컴포넌트가 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원도 덜 사용한다. 2. ES6의 화살표 함수는 함수를 파라미터로 전달할 때 유용하다. 3. 일반 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다. 4. props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. 5. props 값을 따로 지정하지 않았을 때 기본값을 설정하는 것은 defaultProps를 통해 가능하다. 6. 컴포넌트 태그 사이의 내용을 보여주는 props는 props.children을 통해서 가능하다. import..

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 음 2장을 통해서 알아야하는 것은 무엇일까? 나는 어떤 대답을 할 수 있어야할까? 한마디로 2장 JSX 단원의 목표가 무엇일까? 목표: 1. WHY? => JSX를 왜 쓰고, 어떤 문제를 해결해주는지 명확하게 대답을 할 수 있어야 한다. 2. HOW? => JSX를 어떻게 쓰는지 알아야 한다. (규칙) 2.1 코드 이해하기 Create-React-App을 통해서 프로젝트를 만들고 index.js에 들어가보자. import React from 'react'; 이 코드는 리액트를 불러와서 사용할 수 있게 해 줍니다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트..