놀러와요 버그의 숲

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

이 글은 『리액트를 다루는 기술』(개정판/ 김민준 저 / 길벗 출판사)이라는 책을 참고하여 썼습니다. 학습 범위: p120 ~ p140 새로 알게된 사실 1. 이벤트: 사용자가 웹 브라우저에서 DOM 요소들과 상호 작용하는 것 2. Form 요소는 값이 바뀔 때 onchange 이벤트를 실행한다. 3. div, input,span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 우리가 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할수 없다. 4. onChange 이벤트 핸들러에서 e.target.name은 해당 인풋의 name을 가리킨다. 5. 객체 안에서 key를 []로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제값이 key값으로 사용된다. const name = ‘variantKey‘; cons..

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