2022_01_11

⚙︎ React 컴포넌트

  Component란 UI또는 기능을 부품화 함으로서 재사용이 가능하게하는 것이다. 예를들어 동일한 UI를 반복사용해야 할때 UI는 동일하게 사용하고 데이터만 바꿔주는 식으로 사용한다. 컴포넌트는 언뜻 Ctrl + C, V 와 비슷해보이지만 수정을 해야할때 원본만 수정하면 클론들까지 모두 적용된다는 점에서 차이가있다.

⚙︎ 컴포넌트의 형식

   컴포넌트의 형식으로는 Class형과 함수형이 있다. Class형에 비해 함수형이 더 간결하게 사용가능하기에 (에로우 함수도 사용가능) 함수형을 지향하는 추세이다. 하지만 말그대로 지향이기에 아직까지 class형 컴포넌트를 사용하는 기업도 있으며 혼합되어있는 경우도 있다. 이러한 경우 class형식을 함수형식으로 바꾸기위해서는 class형에 이해가 필요하기에 둘다 이해할 필요가 있다.

함수형 컴포넌트가 만들어 질 수 있었던 이유에는 state의 탄생이 있다.

⚙︎ Hooks

   사실 함수형 컴포넌트는 그 자체만으로는 클래스형 컴포넌트의 모든 기능을 재현할 수 없었다. 그래서 React는 함수형에서도 클래스형의 기능을 사용할 수 있게 도구를 만들어주었다. 그 도구가 바로 hooks 이며 대표적인 친구들로 useState, useEffect 있다.

⚙︎ state

   위에 설명한 hooks친구들을 이용해 우리는 state라는 변수를 만들 수 있다. state의 문법을 아래와 같다.

const [변수명, 변수바꾸는기능] = 변수만드는기능(담을내용)
const [classmate, setClassmate] = useState("철수")

문법만 보면 대체 간단한 let, const를 냅두고 state를 사용하는지 이해가 안갈것이다. 기존 데이터(let, const)는 변수를 사용해 어떤 기능을 작동시키면 데이터부분은 변경되지만 화면에는 반영이 안된다. 하지만 state로 변수를 만들면 state를 통해 화면에 나타내고 setState()를 사용해 재할당도 가능한 강력함을 보여준다.

⚙︎ Today Coding

   어제 만들었던 게시판 업로드 코드를 보니 정렬을 위해 display: flex; 를 남발한것이 발견되었다. 여기서 생기는 문제점은 css의 코드양도 늘어나지만 flex를 위해 부모요소를 만들어 감싸다 보니 html또한 보기힘들정도로 지저분해져있었다. 또한 flex를 사용했을 경우 반응형 웹을 만들때 큰 지장이 있었다. 때문에 오늘은 게시판 업로드 부분을 아예 새로 만들었으며 나름대로 최적화를 해보았다(flex사용 x). 또한 오늘 배운 state를 통해 데이터를 담아 조건을 주어 오류메세지를 출력하는 기능또한 구현했다. state를 사용하면 과거 실패했던 Button 1개로 인증과 clearInterval기능의 동시구현이 가능할 것같은데 여유시간이 생기면 다시 시도해봐야겠다.

[index 링크] https://github.com/Dalaranl/codecamp_frontend_05/blob/master/freeboard_frontend/pages/boards/upload/index.js

[css 링크]
https://github.com/Dalaranl/codecamp_frontend_05/blob/master/freeboard_frontend/styles/boards/upload/emotion.js