리액트

이전 포스트와 연결되는 내용입니다. getDerivedStateFromProps는 최초 마운트 시와 갱신 시 모두에서 render 메서드를 호출하기 직전에 호출됩니다. state를 갱신하기 위한 객체를 반환하거나, null을 반환하여 아무 것도 갱신하지 않을 수 있습니다. App.js 파일 LifecycleEx006.js 파일 getDerivedStateFromProps(props,state) 함수는 constructor() 함수 다음으로 실행됩니다. 컴포넌트가 새로운 props를 받게 됐을 때 state를 변경해줍니다. App.js에서 전달한 prop_value라는 변수를 props.prop_value로 접근해 값을 가져올 수 있습니다. 콘솔 창을 확인해봅시다. 현재 공부하고 있는 책에서는 이와 같은 ..

constructor(props) 함수는 생명주기 함수 중 가장 먼저 실행되며 , 처음 한번만 호출 됩니다. component 내부에서 사용되는 변수(state)를 선언하고 부모 객체에서 전달받은 변수(props)를 초기화 할때 사용합니다. super() 함수는 가장 위에 호출해야 합니다. 생명주기 함수들이 실행될 때 로그를 출력해 어떤 함수가 먼저 실행되는지 알아보겠습니다. src 폴더에 LifecycleEx005.js 파일을 생성한 후 App.js 에 이식하겠습니다. 결과를 확인해보면 ... constructor 함수가 실행된 후 render 함수가 실행된 것을 알 수 있습니다! 오늘도 즐공 ! ! 리액트

리액트에서 생명주기란, 컴포넌트의 생성, 변경 ,소멸 과정을 뜻합니다. render 함수는 그중에서 컴포넌트의 생성 과정에 속합니다. render() 는 return 되는 html 형식의 코드를 화면에 그려주는 함수입니다. 화면 내용이 변경되어야 할 시점에 자동으로 호출됩니다 . 예시로 LifecycleEx 라는 컴포넌트를 생성한 후 App.js에서 임포트해 사용해보겠습니다. 실행 결과를 확인해봅시다. 크롬 웹 브라우저에서 F12를 눌러 개발자 도구 창을 띄운 후 Console 탭을 클릭하면 render()함수에서 출력된 로그를 확인할 수 있습니다.

Component(컴포넌트): 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말합니다. Component를 파일 단위로 작성한 후 필요한 위치에서 임포트해 사용할 수 있습니다. ( 따라서 유지보수하기에 유리하겠죠 ? ) 파일구조 예시로 src 폴더에 ImportComponent.js 파일을 생성한 후 다음과 같이 입력합니다. return 된 html 코드를 render() 함수를 사용해 화면에 표시한다. 컴포넌트를 사용하기 위해선 ? App.js 파일과 같은 경로에 위치한 ImportComponent.js 파일을 임포트 한 후 , 컴포넌트 명을 태그와 함께 사용하면 된다 . 결과는....

개발 환경을 준비하기 전 정리 ! 자바스크립트 패키지 관리 도구에는 npm 과 yarn이 있다 npm: 'node package manager'의 약자로 node.js 와 react.js에서 사용하는 대부분의 패키지를 설치할 수 있다. npm 은 node.js와 함께 설치된다. yarn: 페이스북에서 만든 패키지 관리 도구로, npm에 비해 캐싱,보안, 신뢰성등이 개선되었다. 1. node.js 다운로드 node.js 공식 웹사이트에 접속해 14.4.0 버전을 다운로드 한다. 64비트 윈도우 운영체제인 경우에는 node-v14.4.0-x64.msi를 다운로드 한다 . 2. node.js 설치 다운로드 한 파일을 실행해 설치를 시작하고 무한 next ...후 finish 버튼을 클릭한다. (체크 박스 선택..