html, css, javascript로도 충분히 웹사이트를 만들어낼 수 있는데 굳이 react를 쓰는 이유는 뭘까?
html, css, javascript만으로는 큰 프로젝트를 하기에 어려움이 있다.
또 그 안에 존재하는 button이나 input들을 매번 하나하나 만들기엔 힘들고 비효율적이다.
잘 쪼개서 만들어놓고 레고상자에 담아놓은 다음 필요에 의해 꺼내서 사용할 수 있는 방법이 있다.
이 부품화된 기능 하나 하나를 component라고 한다.
컴포넌트들을 조립해 홈페이지를 만들어내는 것이다.
리액트의 핵심은 이 컴포넌트이다.
그렇다면 component를 일일이 필요할 때마다 불러오는 것보다 기존에 있던 코드를 복사 붙여넣기 해도 되는 것 아닐까?
복사 붙여넣기 하게 되면 한창 잘 사용하다가 새롭게 수정할 일이 생겼을 때 동일한 코드를 하나하나 다 찾아서 수정해주어야 하는 단점이 있다.
페이지도 하나의 커다란 component이다.
component를 만들 때 사용되는 도구가 function인데, 이 function은 두 가지로 작동할 수 있다.
- 기능을 위한 함수
- 컴포넌트를 만들기 위한 함수
이전에는 class형 component를 많이 썼지만 함수형 component가 훨씬 간결하다.
class형 component 전용 기능들을 함수형 component 안에서 사용할 수 있게끔 react에서 제공되는 것들이 있는데, 그 기능들을 hooks라고 부른다.
hooks는 use로 시작하는 애들이다.
useState란 state를 만들어주는 애다.
component 각각에 변수를 저장해줄 수 있는데 얘네들을 state라고 부른다.
const [state, setState] = useState("철수")
state는 변수명, setState는 변수를 바꿔주는 함수, useState는 변수 만들기, "철수"는 초기값이다.
on으로 시작하는 함수들은 마우스를 올리거나 클릭을 하거나 하는 행동을 취했기 때문에 event가 발생한다. 이런 애들을 이벤트 핸들러(event handler)함수라고 부른다.
