🤓 슬기로운 개발생활 🤓 슬기로운 개발생활

함수형 컴포넌트 vs 클래스 컴포넌트 컴포넌트는 자바스크립트의 함수처럼 하나의 기능을 하는 단위라고 생각하면 될 것 같다. 하나의 컴포넌트는 하나의 커스텀 태그의 역할을 한다. 컴포넌트는 함수형으로, 클래스형으로 작성할 수 있다. 함수형 컴포넌트 함수 컴포넌트로 태그를 만들었다. 이 컴포넌트는 index.js에서 사용하고 있고, 로 name이라는 props를 넘겨주고 있다. props를 받기 위해서는 App에서 props를 인자로 받아야한다. 클래스 컴포넌트 ES6 class를 사용하여 컴포넌트를 정의할 수도 있다. 어떻게 Hello, wow가 화면에 렌더링 되게 되는 것일까? 1. 엘리먼트로 ReactDOM.render()를 호출하게 된다. 2. React는 {name : "wow"} 를 props로 ..

Codesandbox 사용해서 Hello world 출력해보기 react를 실행하기 위해서는 react를 설치해야 한다. 하지만 codesandbox에서 설치하지 않고 실행해볼 수 있다. 1. 로그인을 한 후 dashboard에 들어간다. 2. new sandbox를 클릭하고, 리액트를 클릭해준다. 3. import로 React 와 ReactDom을 불러오고 render 해주면 된다. render안에 있는 내용은 Hello world 라는 태그를 id가 root인 태그안에 넣겠다는 뜻이다. Hello World 라는 태그는 아래와 같이 위치하게 된다. Hello World Creat React App 으로 출력해보기 react를 사용하기 위해서는 react 프로젝트를 생성해야 한다. npx create-..

React 리액트 공식 홈페이지에 들어가면 리액트는 '사용자 인터페이스를 만들기 위한 JavaScript 라이브러리' 라고 나와있다. 웹페이지를 만드는 방법은 크게 두 가지로 나눌 수 있다. 1. html, css 파일을 만들고 javascript로 동적인 액션을 넣어서 만드는 방법 2. vue, react, angular 같은 라이브러리를 사용해서 만드는 방법이다. 자바스크립트 라이브러리 사용하기 웹페이지를 만들고 사용자들과 상호작용을 하게 되면서 많은 상태 관리가 필요하게 된다. 만약, 사용자가 프로필 관리에서 프로필 사진을 바꾼다고 하자. 그럼 아래와 같은 과정이 일어날 것이다. 1. 바꿀 이미지 DOM을 찾는다. 2. 이미지 DOM의 소스를 새로운 이미지로 바꿔준다. 3. 바뀐 이미지를 화면에 다..

라이프 사이클이란? 인간의 생명주기를 나눈다면 배에서 태아가 생길 때, 인생에서 큰 사건을 만났을 때, 죽을 때로 나눌 수 있을 것 같다. 마찬가지로 리액트에서도 생명주기를 나눠볼 수 있다. 라이프 사이클은 총 3단계로 정의할 수 있다. 1. Mounting (생성) mounting은 리액트에서 무언가가 consturctor안에서 생성될 때이다(화면에 무언가가 렌더링 되었을 때). mounting 단계에서는 props나 state를 변경해서는 안된다. 2. Updating (업데이트) updating은 어떤 것이 수정될 때를 말한다. 예를 들어 새로운 props를 받을 때, setState()를 실행할 때가 이 단계에 해당된다. 3. Unmounting (삭제) unmounting은 컴포넌트가 삭제될 때..