DAY 1. React Component ???
오늘은 컴포넌트 개념에 대해 배웠고 나름의 정리를 해보는 시간을 가져보기로했다.
Component ? - UI 또는 기능을 부품화해서 재사용 가능하게 하는 것
쉽게 말하자면 중복된 내용의 UI 혹은 데이터를 다른 페이지로 가져가 사용할 수 있다.
내용을 불러올 때 어제 배운 'import' 해줘야한다는 점을 잊지말 것!
이렇게 보면 그냥 복사 붙여넣기와 다른 점이 있나 싶겠지만 수많은 데이터가 있을때 UI는 동일하게 보여지지만 단순 복사만 할 경우 수많은 데이터를 일일이 바꿔줘야하는데 component를 사용할 경우 원본을 바꾸면 모든 내용을 한번에 변경할 수도 있고 데이터만 각각 변경도 가능하다.
그래서 이 컴포넌트는 한 페이지 전체가 될 수도 있고, 하나의 div도 될 수 있다.
component 두가지 작성 방법
사진으로 비교해 보아도 함수형으로 작성할 때 코드 길이가 훨씬 간결해보인다.
기존에는 클래스 형식을 대부분 사용했었는데 그 이유는 컴포넌트를 작성할 때 변수를 영구 저장할 수 있어야하는데 기존 함수는 그 기능이 없었다. 하지만 hooks(useEffect, useState 등의 기술)로 인해 함수에서도 영구 저장이 가능해졌고 화살표 형식으로 코드를 간결하게 만들 수 있는 함수형 컴포넌트를 주로 쓴다고 한다. 두 방식이 공존하기때문에 두 가지 모두 사용할 줄 아는 연습이 필요하겠다.
여기서도 잊지말 것 !
실제 코드를 짤때 함수형 컴포넌트가 클래스형과 동일한 기능을 가질 수 있는 이유는 react-hooks라는 도구의 useState로 할 수 있는 것이기 때문에 'import' 를 사용해 가져와줘야한다.
컴포넌트의 변수 ⭐️ State
state를 사용하기위해 기억해둬야할 3가지가 있다.
- state - 컴포넌트에서 사용하는 변수
- setState() - 컴포넌트에서 사용하는 변수를 바꿔주는 기능, 괄호 안에 변경될 값을 넣어준다.
- useState() - 컴포넌트에서 사용하는 변수를 만들어주는 기능, 괄호 안에 초기에 표출될 값을 넣어 사용한다.
변수로 let을 쓰지않고 state를 쓰는 이유는 뭘까?
사진과 함께보자면,
let을 변수로 써서 코딩을 하면 기존 코드에 적어둔 값에서 변화되는 값을 반영하기 위해 document, getelement~, inner~ 등의 메서드나 속성을 넣어 위치를 지정해줘야하는 번거로움이 있다.
state의 경우, 따로 연결을 해주지않아도 div안에 state 함수만 넣어주면 브라우저와 함수가 동일하게 동작한다는 장점이 있다.
DAY2. 한줄평 : "가보자고~!!!💪🏼"
점점 배우는 게 많아지면서 이렇게 블로그로 한번 더 정리하면서 자주 사용하게 될 용어들의 개념을 잡고 갈 수 있게 되는 것 같다. 얼른 익숙해져야지!!
