코멘토 실무PT 후기 챌린지_리액트 강의 3주차 후기

✔️ 2주차 과제에서 피드백 받은 내용

차트를 chart.js 파일로 컴포넌트로 따로 관리한 점이 좋음.

html/css로 구성된 파일을 리액트로 구현할 때 class를 className으로 꼭 바꾸기!!

기존의 a 태그에 있던 html 경로를 기본 경로인 /로 바꾸기.

 

 

---

✔️ 3주차 실무 PT 주제

동적 화면 구현을 위한 React의 state/props + useState와 useEffect

 

 

✔️ 이번 주 수업을 통해서 배운 점

■ State와 Props

state - 컴포넌트 안에서 관리 되고, 바뀌는 동적인 데이터 (= 변수)

변하는 값은 상태에, 변하지 않는 값은 그냥 변수로 선언해서 사용하는 것이 좋다!

Props - 컴포넌트 간에 전달되는 데이터 (부모->자식 단방향 흐름)

자식에서 부모 컴포넌트로의 방향은 불가능!

그리고 부모에서 자식 컴포넌트로 props로 넘길때는 읽기 버전 밖에 안된다. 

 

 

■ React Hooks란?

리액트 16.8버전부터 새로 추가된 기능으로, state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리

Hooks 규칙

• 최상위에서만 Hooks을 호출
• 리액트 함수 안에서만 호출
• 같은 Hook을 여러번 호출 가능

자주 사용하는 React Hook

useState : 상태를 관리하는 Hook
useEffect : 컴포넌트가 렌더링 될 때 특정 작업을 실행하는 Hook

 

---

■ useState = 컴포넌트의 상태(state)를 관리하는 Hook

import React, { useState } from 'react’; 
const [number, setNumber] = useState(0);

useState는 구조분해 할당을 이용한거다.

 

그럼 왜 굳이 useState를 사용할까? => 상태 데이터들이 변경될 때 HTML에도 알아서 변경해준다.

⚡️ 자동 재렌더링이 된다.

⚡️ 페이지 버벅임이나 새로고침되는게 없다.

-> 새로고침 없이도 HTML을 바꿔 보여주는 웹앱같은 사이트 제작 가능하다!

❗️ 웹앱처럼 만들기 싫거나 자주 변경 되지 않는 데이터를 저장하고 싶으면 그냥 var let const 변수 사용해도 무관❗️

 

---

■ useEffect = 컴포넌트가 처음 나타날 때, 업데이트 될 때 (특정 props가 바뀔 때), 그리고 사라질 때의 작업을 처리함

처음 나타날 때 = componentDidMount  

 

업데이트 될 때 = componentDidUpdate (props가 바뀌는 시점, state가 바뀌는 시점, 부모 컴포넌트가 리렌더링되는 시점, dom이 변경될 때)

사라질 때 = componentWillUnmount

 

import React, { useEffect } from 'react’;
useEffect (() => {
    console.log("Data changed!");
}, [data]);

 

첫번째 파라미터는 함수, 두번째 파라미터는 의존값이 들어있는 배열 (없어도 무관)

• 두번째 파라미터가 없다면 렌더링 될 때마다 실행된다. 
• 두번째 파라미터가 빈칸이면 [] 컴포넌트가 처음 나타날 때만 함수를 호출한다. 

• return에 함수를 반환 할 수 있는데 이를 cleanup 함수라고 한다. 
• cleanup 함수는 useEffect 에 대한 뒷정리를 하는 역할을 한다. 

 

---

■ Javascript 고차함수 (함수를 파라미터로 전달 받을 수 있고, 연산의 결과로 반환해주는 메서드)

Map

배열을 순회하면서 콜백함수의 실행결과를 리턴한 값으로 이루어진 배열 반환

const numberArr = [1,2,3,4,5];
const numberMapArr = numberArr.map(item => item%2 === 0 ? '짝수' : '홀수')
console.log(numberMapArr);
//['홀수', '짝수', '홀수', '짝수', '홀수']

Filter

배열을 순회하면서 콜백함수의 실행결과가 참인 요소로만 이루어진 배열 반환

const numberArr = [1,2,3,4,5];
const numberFilterArr = numberArr.filter(item => item%2 === 0)
console.log(numberFilterArr);
//[2, 4]

 

Sort

배열 정렬할 때 사용, 콜백함수를 통해 어떤 기준으로 정렬할지 지정

const numberArr = [4,5,2,3,1];
numberArr.sort((a,b) => a-b) /// [1, 2, 3, 4, 5]
numberArr.sort((a,b) => b-a) /// [5, 4, 3, 2, 1]

 

 

---

https://codesandbox.io/s/react-map-forked-uwo2tp?file=/src/data.js 

react map (forked) - CodeSandbox

 

 

---

https://bit.ly/3D9XCOz

성과를 만드는 현직자의 실무 노하우 ㅣ 코멘토