Jay

이번에는 state값을 업데이트 할 때 왜 불변성을 유지하는지 그리고 컴포넌트 업데이트를 하게 될 때 성능최적화는 어떻게 하게 되는지 알아보자. App.js에 information 값에 기본값을 넣어주도록 하자. 컴포넌트 업데이트 최적화 작업을 할 때 할때마다 등록하는 거 보다 사전에 무엇이 있는게 작업할 때 편하다. 기본값을 넣어주었고 아래와 같이 나오게 된다. id값은 다음 들어갈 값이 id가 3이니까 id=3으로 넣어준다. class App extends Component { id = 3; state = { information: [ { id: 0, name: '홍길동', phone: '010-0000-0001' }, { id: 1, name: '김민준', phone: '010-0000-0002' ..

데이터를 수정하게 될 때에는 .slice함수 또는 .map함수를 사용할 수가 있다. slice를 수정할 때는 배열을 잘라서 사이에 어떤 것을 넣는식으로 하고 map함수같은경우에는 배열안에 데이터를 모두 제곱할 때 또는 데이터 배열을 리액트 컴포넌트를 변환할 때 전체적으로 변환할 때 사용할 수 있다. 특정조건에 부합할 때만 변경시키고 그렇지 않으면 그대로 유지하는 기능도 가능하다. map함수를 통해서 기능을 익혀보자. n이 3이면 9로 바꿔주고 그렇지 않으면 그대로 numbers값인 n을 출력하게 하면 아래와 같다. // slice [ ...numbers.slice(0, 2), 9, ...numbers.slice(3, 5) ] (5) [1, 2, 9, 4, 5] numbers (5) [1, 2, 3, 4,..

데이터를 수정하는 방법에 대해서 알아보자. 불변성을 유지하면서 작업을 처리해줘야 한다. 배열안에 들어있는 데이터를 불변성을 지키면서 제거할 때는 JS 내장함수 .slice 또는 .filter를 통해서 할 수가 있다. 아래와 같이 slice를 사용하는 코드를 작성하자. slice(0, 2)라고 하면 인덱스 0부터 시작해서 인덱스 2전까지의 데이터 즉 인덱스 0 1의 데이터를 가져오는 것이다.(기존의 numbers 배열은 건드리지 않는다.) const numbers = [1, 2, 3, 4, 5]; undefined numbers.slice(0, 2); (2) [1, 2] numbers.slice(0, 3); (3) [1, 2, 3] numbers.slice(1, 3); (2) [2, 3] numbers.s..

이번에는 JavaScript 배열 내장함수 map에 대해서 알아보자. map이라는 내장함수의 용도는 배열을 특정함수를 사용하여 전체적으로 변환해주고 싶을 때 사용하는 함수이다. 리액트 프로젝트에서 사용하기 전에 Chrome console에서 사용해보도록 하자. 숫자로 이루어진 배열 하나를 만들자. numbers배열을 가지고 안에 값들을 전부 제곱하는 것을 작성해본다. 원래는 for문을 이용해서 제곱시키는 코드를 작성할 수도 있지만 map을 이용하면 numbers.map해서 함수를 작성해주는 것이다. 함수는 내부에 있는 n값들을 n * n으로 만들어라이다. st numbers = [1,2,3,4,5]; undefined const squared = numbers.map(n => n * n); undefin..

자식 컴포넌트가 부모한테 값 전달하는 방법에 대해서 알아보자. App컴포넌트 내부에서 handleCreate라는 메소드를 만든다. 그리고 그 메소드를 자식컴포넌트한테 props로 전달을 해주고 여기에서 props로 전달한 함수를 호출시켜서 data값이 App한테 들어가게끔 작성을 해준다. 코드상으로 확인해보자. 만든 컴포넌트들이 아래와 같이 있는데, App.js에 handleCreate라는 함수를 만들어준다. data를 파라미터로 가져와서 지금단계에서 console.log(data);라고 확인만 해준다. 또 PhoneForm에다 oncreate라는 값으로 handleCreate를 전달해 준다. class App extends Component { handleCreate = (data) => { conso..

작업하고 있는 폴더안에서 component폴더를 만들고 PhoneForm.js를 만들어 놓는다.(다른 파일들과 분리시키기 위해서) 컴포넌트를 작성해준다. 그리고 reactjs code snippet을 확장프로그램에서 설치를 해주면 JS에서 rcc라고 입력을 하면 클래스 형태로 만들어진 컴포넌트를 만들어 줄 수 있다. 그리고 rsc라고 입력하면 함수형 컴포넌트를 만들 수가 있다. // rcc 클래스 컴포넌트 import React, { Component } from 'react'; class dadada extends Component { render() { return ( ); } } export default dadada; 임시로 PhoneForm이라고 입력해놓고 app.js애서 import해준다. 직..

코드상으로 직접 사용해보면서 알아보자. constructor부터 알아보자. constructor는 컴포넌트가 처음 만들어질 때 호출되는 함수이다. props를 파라미터라 받아오고 super(props)를 해주는데 이 용도는 컴포넌트를 만들게 될 때 리액트에서 불러온 컴포넌트를 extends하고 이것을 상속하는데 컴포넌트가 원래 가지고 있던 생성자 함수를 먼저 호출해주고 사용자가 하고싶은 작업을 하는 것이다. 아래와 같은 코드를 작성하면 개발자 도구에서 constructor이 호출된다. import React, { Component } from 'react'; import MyComponent from './MyComponent'; class App extends Component { constructor..

리액트에서 컴포넌트를 만들게 될 때 중요한 개념인 LifeCycle API에 대해서 알아보자. LifeCycle은 생명주기라고 알고 있으면 되는데 컴포넌트가 브라우저상에서 나타날 때 업데이트 될 때 사라질 때 각각의 중간과정에서 무엇을 하고싶다 그러면 LifeCycle API를 사용하면 된다. 종류는 매우 많다. 아래그림을 보자. 이래해서 사용하는 시점에 잘 써먹을 수 있도록 하자. 종류가 많아서 단계별로 천천히 알아보자. Mouting이라는 것은 컴포넌트가 브라우저상에 나타난다는 것을 의미하고 Updating한다는 것은 컴포넌트의 props가 바뀌거나 state가 바뀌었을 때 나타나는 것이고 Unmouting은 컴포넌트가 브라우저상에서 사라질 때 그 과정을 unmouting이라고 한다. Mounting..

Props를 앞에서 사용을 해보았고 밑에 그림과 같이 부모가 자식한테 주는 값이고 주는 방법은 컴포넌트 렌터링 할 때 특정 값을 설정해주는 방식으로 해준다라고 알고 넘어가자. 하지만 props는 자식입장에서는 읽기전용이다. 이거와 다른 개념인 State의 개념에 대해서 알아보자. State는 컴포넌트 자신이 들고 있고, 변화가 필요하다 그러면 컴포넌트 내장함수 중에 setState()를 통해서 값을 설정해 준다. codesandbox에서 Counter.js를 만들고 작성해본다. 작성한 다음 App에서 rendering해준다. 아래와 같이 Counter의 결과값이 보여지게 된다. import React, { Component } from 'react'; class Counter extends Compone..

Props와 State에 대해서 알아보도록 한다. Props와 State는 리액트에서 데이터를 다룰 때 사용되는 개념이다. 간단하게 알아보자. Props에 대해서 알아보면 Props는 부모컴포넌트가 자식컴포넌트한테 값을 전달할 때 사용된다. 나중에 컴포넌트를 만들게 되면 그걸 불러와서 사용할 수 있게 된다.