TIL - 2022.01.11 화요일

오늘 한 일

 

오늘 하루는 내내 '리액트 진짜 좋은데?' 의 반복이었다. 컴포넌트 구조와 state는 정말 정말 정~말 충격적일만큼 편리하다! 세상에 이런 게 있었다니. 내가 원시시대 코드를 짜는 회사에서 일을 하다 와서 더 큰 갭을 느끼는걸지도 모른다. (옛 방식 javascript와 jQuery 퍼블리싱, php 코딩 쪼끔 했다) 회사 다니던 당시에도 '우리 회사 코드 너무 구린데..' 라고 생각했지만, 나와서 공부하면서 돌이켜보니 뭔, 10년도 더 전에 쓰던 방식으로 코드를 짜고 있으니.. 할 말은 많지만 별 의미 없으니 길게 하지 않겠다. 그저 퇴사해서 다행이다. 그리고 구시대 코딩을 경험한 덕분에 공부가 재밌다. 혼자 시간여행하는 기분이다.

 

1. 리액트의 핵심, Component

---

Component란?

• UI 또는 기능을 부품화해서 재사용 가능하게 하는 것이다. 부품을 미리 만들어놓고 필요한 곳에 Import해서 쓰는 방식으로, 일종의 모듈화라고 생각하면 된다. 단순한 복사 붙여넣기보다 수정, 관리가 훨씬 용이하다. 원본 컴포넌트만 통제하면 되기 때문.
• 단, 컴포넌트에 들어가있는 데이터까지 Import하지는 않는다. UI만 Component로 만들어서 불러오는 것.
• react의 jsx 파일에서 function으로 정의되는 큰 페이지도 컴포넌트다. 이러한 것을 함수형 컴포넌트라고 부른다.
• 이 function은 함수를 정의하는 function과는 다르다.

 

2. 리액트의 핵심2, State

---

State란?

컴포넌트의 변수로, 화면에 자동으로 반영되는 변수이다. 기본 형태는 아래와 같다.

const [state, setState] = useState()

state : 변수

setState : 변수를 바꿔주는 함수

useState() : 괄호 안에는 변수의 초기값이 들어간다.

 

React-hooks에서 제공하는 기능으로 useState()가 없으면 state를 쓸 수 없다. state를 사용하기 위해서는 페이지에 import도 해주어야 함.

 

import { useState } from 'react'

 

3. 클래스형 컴포넌트 vs 함수형 컴포넌트

---

코드캠프의 강의 참고 이미지

지금 우리는 함수형으로 배우고 있지만, 함수에 변수를 영구저장하는것이 불가능하던 옛날에는 클래스형 컴포넌트를 썼다. 현재는 클래스형에서 함수형으로 넘어오는 단계로, 현업에 들어갔을 때 클래스형과 함수형이 공존할 수 있다고 한다. 함수형으로 공부하되 클래스형의 구조도 알아두어야 한다.

 

바뀐 이유?
함수형을 사용하면 코드가 간결해진다. 코딩 양이 확 줄어드는 것.

 

프로그래밍 기술은 사용자의 편의성을 위해 점점 발전하고 있다. 모든 분야의 기술이 그렇지만, 프로그래밍은 특히 그 속도가 빠른 편이라고 느낀다. 결과적으로 원하는 기능이 구현되기만 한다면 코드에 옳고 그름은 없지만, 협업을 기본으로 하는 분야이니만큼 내가 일하게 될 파트너십들과 필드의 기술 변화 흐름은 파악하고 있어야겠다는 생각이 든다. 취업한 이후에도 그렇겠지? 진짜로 평생 공부해야하는 직종이네 이거.. (오히려 좋아)

 

3. 어제의 과제 해결

---

오늘의 제일 뿌듯한 일! 어제 실습하면서 React에 Emotion으로 글로벌 스타일 css를 적용할 방법을 여러가지 시도해보았으나 다 실패했다. 오늘 해결방법을 찾았다. 아래의 블로그 글을 보고 내 환경에 맞추어 몇가지를 조정하니 드디어! 성공!

 

https://egg-programmer.tistory.com/226

[React + Emotion] 리액트에 글로벌 스타일 적용하기

 

나는 내가 익숙한 방식대로 reset이라고 네이밍했지만, global style 쪽으로 이름을 붙여주는 편이 추후 작업하기에 더 편할 것 같다. 코드의 형태와 구조가 변한 탓에 사실상 reset의 기능은 하지 않으니까. 이 부분에 대해서는 내일 낮에 정리하여 블로깅할 예정이다.

 

4. 실습 : 게시물 등록 페이지

---

state를 이용하여 필수 항목을 입력하지 않으면 에러메시지를 띄우고 해당 input으로 focus하는 기능을 달았다. 검사를 전부 통과하고 등록에 성공하면 input 페이지와 state 변수를 초기화하는 스크립트도 추가했다. 글로벌 스타일 css 추가도 성공했다. 오늘은 개운하게 집에 갈 수 있겠다.

 

5. 그리고..

---

오늘 기껏 일찍 나와놓고 카드키를 안가져와서 방황했다.. 내일은 카드키를 꼭 챙길 것. (바보반성일기)