[포스코x코딩온]웹개발 풀스택 코스 10주차 회고 feat. 본격적인 React

금주부터는 React를 본격적으로 시작하였다.

그 내용들을 하나씩 정리해 보고자 한다.

 

1. ClassComponent(간략하게)

2. useState

3. props

 

 

---

1. ClassComponent

사실 함수형 컴포넌트가 더 최신 기술이고, 앞으로 사용도 이 기능으로 해야 하지만,

클래스 컴포넌트로 구성된 웹을 관리해야하는 상황이 있을 수도 있고, 클래스 컴포넌트를 함수형으로 바꿔야하는 작업을 실전에서 할 수도 있기 때문에, 원조인 클래스 컴포넌트를 알 필요가 있다고 강사님이 판단하셨다.

그래서 간략하게 진행을 하였다.

 

클래스 컴포넌트 코드를 작성한 모습

위 사진은 클래스형 컴포넌트를 코드로 작성한 모습이다.

앞선 포스팅에서 소개한 함수형 컴포넌트와 다른 점은 약 3가지 정도로 말할 수 있을거 같다.

 

(1) import { Component } from 'react'를 해줘야한다.

(2) class로 시작하여 컴포넌트 명을 작명한 후 extends(상속)를 이용해 Component를 불러들여야 한다.

(3) render() 함수를 사용해야하고 그 안에 return을 작성해 그리고 싶은 태그를 입력한다.

 

위의 3가지 일을 추가적으로 해야한다는 것이 함수형 컴포넌트와 구별되는 모습이다.

확실히 최근 업데이트가 된 함수형 컴포넌트의 코드가 짧고 깔끔하다는 것을 느낄 수 있다.

위 3가지를 제외하고는 컴포넌트를 익스폴트하고 임폴트하는 과정은 똑같다.

이 부분은 코드 형식만 아는 수준에서 클래스형을 함수형으로 바꿀 수만 있으면 되서 간략하게 코드를 작성하고 마무리 되었다.

 

---

 

2. useState

진짜 본격적으로 핵심이 되는 내용은 이 useState를 사용하는 법 부터였다.

useState는 변수선언과 같은 것인데, 다른 점이 있다면, useState가 변화할때마다 App.js의 return 안에 있는 태그들을 재랜더링 시킨다는 점이다. 그래서 useState 안의 값들이 바뀌면 바로 재랜더링을 시켜 변화된 값을 바로 반영할 수 있도록 해준다.

 

useState를 이용한 동적UI

위와 사진이 useState를 이용해 만든 코드이다.

useState를 import하고, 함수형 컴포넌트 명과 return 사이에 const로 선언을 해준다. 그리고 state변수명을 [ 작명 ] 첫 번째에 작명을 해주고, [작명,  set함수 작명] 컴마를 찍고 두번째에 set함수명을 작명해 준다.

위 코드는 [teacher]라고 작명했고, set함수는 [setTeacher]라고해서 최종적으로  const [teacher, setTeacher]라고 작성을 하였다.

teacher뒤에 setTeacher라는 함수는 teacher가 가지고 있는 값에 변화를 주고 싶을 때 사용된다. 보통 set함수라고 부르는데, 작명도 첫 번째 선언한 이름을 그대로 따서 setTeacher라고 표현한다. 이렇게 통일 해주는 이유는 state가 여러 개 있을 때 헷갈리지 않게 해주기 위함이다. set이 붙어 있고, 이름이 같으면 teacher라는 state의 set함수라는 걸 한번에 알아 볼 수 있다.

그 다음에 = useState()라고 쓰고, useState에 붙은 ()(소괄호) 안에 넣어주고 싶은 값이나 배열 혹은 객체를 넣어주면 된다.

 

위에 내가 짠 코드는 teacher 라는 state에 'c아저씨'라는 스트링 값을 넣어준 것이 된다.

그래서 return안에 {teacher}라고 써주면 'c아저씨'라는 글씨가 사이트에 그려지는 걸 볼 수 있다.

참, HTML형식의 태그가 아닌 JS문법을 사용하게 될 때에는 return안에서는 {}(중괄호)를 써서 그 안에 표현해야 한다.

그래서 {teacher}라고 태그 안에 입력하는 것이다.

return 안에 {teacher}라고 state를 그려준 모습

위 사진 처럼 'C아저씨'가 랜더링되서 웹에 잘 표현된 것이 보인다.

그런데 이렇게 보면, let이나 const같이 JS에서 일반적으로 변수 선언하는 것과 큰 차이를 못 느끼겠다.

그래서 이번에는 <button>태그에 붙은 onClick 부분을 설명해보고자한다.

 

위 사진의 코드 처럼 버튼에 onClick을 주고 콜백함수 형태로 setTeacher를 작동하게 만들었다.

setTeacher는 teacher가 품고 있는 값에 변화를 주기위해 존재한다고 앞서 설명하였다.

그 의미는 위 코드 중 setTeacher('Mr.C')라는 부분을 보면 된다. 이 코드가 기능하는 바는 teacher가 현재 'c아저씨'라는 스트링을 가지고 있는데, 이 값을 'Mr.C'로 바꾸어준다는 의미가 된다. '영어로!'라고 되어 있는 버튼을 누르면, 이 setTeacher가 작동하여 'c아저씨'라는 state값을 'Mr.C'로 바꾸어 주어 동적인 UI작동이 가능하게 만들어 준다.

 

'영어로!'라는 버틍을 눌러 'c아저씨'가 'Mr.C'로 바뀐 모습

이렇게 Mr.C로 바뀐 것을 볼 수 있다.

setTeacher는 그런 기능을 하는 set함수이다. 이 기능은 이렇게 단일한 값을 바꿀 수도 있지만, 배열을 통째로 바꿀 수도 있고, 증감연산을 할 수도 있다. 그리고 삼항연산자와 함께 사용하면, 클릭으로 색깔이 변화하거나 클릭으로 컴포넌트가 교체가 되게 하는 등 여러 동적인 UI기능을 담당할 수도 있다.

나는 여기서 React의 강력함을 느끼게 되었다.

이전 JS에서는 Dom설정을 해야해서 코드가 최소 3줄 이상은 나왔다.

그런데 이건 태그 선택자를 만들어 줄 필요가 없어 코드가 간소화되고, 기능 구현을 하는 것에서도 매우 심플해졌다.

작업속도도 굉장히 빠르다고 느꼈다.

이런 기능이 있기 때문에 프론트-엔드에서 요구하는 기술에서 React를 기본으로 보고 있는 것이 당연하다는 느낌을 받았다.

---

3. props

이것은 state를 상속하는 기능이라고 생각하면 된다.

말보다 코드를 보는 것이 좋으니 수업때 작성한 코드를 예시로 설명을 이어가 보겠다.

 

왼쪽은 App.js 이고, 오른쪽은 PropsHeader라는 컴포넌트이다.

App.js에는 text라는 state가 선언되어 있지만, PropsHeader에는 아무 state도 선언되어 있지 않는 상태이다.

그리고 App.js 내에는 PropsHeader가 import되어서 자식 요소로 들어가 있다.

즉, 현재 왼쪽 사진의 모습은 App.js가 '부모', PropsHeader가 '자식' 관계로 되어 있는 것이다.

여기서 부모(App.js)는 state를 가지고 있다.

이 관계를 이해했다면 그 다음으로 생각해 볼 수 있는 것이 부모의 state를 자식(PropsHeader)에게 물려 줄 수 없을까? 이다.

물려줄 수 없다면 저 state선언 작업을 PropsHeader라는 컴포넌트에 한번 더 선언해 줘야하는 번거로움이 생긴다.

또한 둘은 이름이 같아도 독립된 공간에 있는 state로 즉, 서로 연동이 안되어 있어 변화를 줘야하는 작업을 할때 2번 set함수를 적용해야하는 번거로움이 또 발생한다.

그래서 부모의 state를 자식에게 물려줄 수 있다면, 한번 변경 작업이 있을때, 부모 뿐만 아니라 자식도 함께 연동되어 변화작업을 쉽게 처리할 수 있다.

 

이 기능을 가능하게 하는 것이 props이다.

부모의 state를 자식에게 다발로 던져주는 것이다. 그렇게 되면 부모와 자식이 state를 공유하게 된다.

여기서 주의점은 자식이 부모에게 물려줄 수는 없다. 오로지 부모가 자식에게만 물려줄 수 있다.

props기능을 하게하는 코드 작성은 아래와 같다.

부모 영역에서는 물려주고 싶은 자식 컴포넌트 (PropsHeader)의 명 옆에 작명을 하고 = {} 이렇게 중괄호 안에 물려받을 state명을 입력한다. 보통 작명은 state명과 일치하게 만들어주는 것이 일반적이다.

그래서 위 예제에서도 text = {text}라고 작명했다. 앞에 text는 내가 임의로 작명한 것이고, {text}는 부모에게서 선언된 state명을 그대로 가져오는 것이다. 그래서 둘은 같은 text이지만, 차이가 있다는 것을 기억하자.

부모 영역에서의 작업은 끝났다. 이제부터 오른쪽 사진으로 넘어가 자식 영역에서 작업을 해보자.

자식 컴포넌트에서는 함수명 뒤의 ()(소괄호)안에 부모 영역에서 임의로 적었던 text를 {}(중괄호)하나를 더 만들어 그 안에 입력해 준다.

이게 그럼 무슨 의미가 되냐면, 부모 영역의 text={text}를 자식 영역의 PropsHeader({text})로 가져오게 되는 것이다.

다른 표현으로는 연동이 된다고 생각하면 될거 같다.

그 다음에 return안에서 쓰고 싶은 태그 안에 {}(중괄호)를 만들어 준 후 그 안에 props받아온 text를 입력해 주면 된다. 그렇게 되면, 자식인 PropsHeader라는 컴포넌트에 부모 영역에 있던 state인 'C아저씨'라는 글씨가 그려지게 된다.

App.js에서 나타나는 PropsHeader컴포넌트의 모습

이렇게 위와 같이 자식의 컴포넌트에 부모의 state값이 표현되는 것을 볼 수 있다.

이것에 props라는 React의 기능이다.

---

 

React를 본격적으로 해보니 강력한 포퍼먼스를 느끼게 되었다.

그전에는 HTML, CSS, JS 이렇게 3가지 파일들을 넘나들며 작업을 했어야 했지만,

이제는 1개의 JS파일에서 모든 작업이 가능해졌다. 그만큼 효율이 강력해진 것이다.

그뿐만이 아니라, 컴포넌트나 useState 같은 기능들로 동적UI구현도 간단하고 파워풀하게 가능해져서

기존 JS를 통한 프론트 작업 대비 엄청난 효율을 맛볼 수 있었다.

이제 수업 막바지로 다가가고 있는데, 마지막 프로젝트의 프론테-엔드 작업은 이 React를 활용하여 훨씬 더 빠르게 작업이 가능할 것으로 전망이 된다.

 

이 외에도 useEffect와 useMemo, useRef와 같은 중요한 훅 기능들을 배웠다. 이 부분은 다음에 시간이 나면 좀 더 정리해 보겠다.

오늘은 여기까지~!