React와 Hooks.

전은찬·2023년 1월 10일
0
post-thumbnail

코딩 부트캠프 2일차.

첫 날 과제에 뒤쳐진다는 생각이 들어서 힘들었지만
수업을 듣고 당일 QUIZ와 과제를 풀어보니 첫 날의 고생이 도움이 되었는 가 보다.
어제에 비하면 나름 수월하게 진행되었다.

오늘 2일차에는 React에 대해 어제보다 더 심도있게 배운 날이다.


// 자료출처: npmtrends.com //

React를 왜 배우는 지 부터 설명을 들었다.
이미지 자료를 보면 예전부터 꾸준히 React 다운로드 수가 제일 많은 걸 알 수 있다.
최근에 vue의 다운로드 수가 많은 지표로 보여지는데 이유는 잘 모르겠어서 시간 나면 멘토님께 여쭤봐야겠다.

React의 장점으로는 사용률이 높다보니 궁금한 부분을 찾아 배울 자료가 많다는 점, 그래서 질문, 검색이 용이하다는 점, 취업과 이직이 쉽다는 점 등이 있다.

그래서 여기 부트캠프에서도 React를 다루고 있고 나도 열심히 배우는 중이다.

컴포넌트란 ui 또는 기능을 부품화해서 재사용 가능하게 하는 것인데 React로 부품을 미리 만들어 놓고 필요할 때마다 조립하는 방식이라고 생각하면 이해가 쉽다.
복붙과 같다고 생각할 수 있지만 복붙은 원본에 영향을 주지않기 때문에 React는 큰 서비스를 만들 때 유리하다고 볼 수 있다.


// 자료출처: 코드캠프 {} //

클래스형 컴포넌트와 함수형 컴포넌트로 작성 방법은 2가지가 있고, 위의 이미지처럼 함수형이 훨씬 간단해 보인다.

추가로 최근에는 많은 기업이 함수형 컴포넌트를 주로 사용한다고하니 공부할 때도 함수형 컴포넌트로 작성하는 법을 위주로 공부해야겠다.

하지만 함수형 컴포넌트만으로는 클래스형 컴포넌트의 모든 기능을 흉내낼 수 없기 떄문에 React에서 동일한 기능을 구현 가능하도록 도구를 만들어 주었다.

이 도구룰 Hooks(훅)이라고 부른다.
오늘은 React-Hooks에서 useState를 사용하여 코딩을 하였다.

// 자료출처: 코드캠프 {} //

state: 컴포넌트에서 사용하는 변수(state)
setState: 컴포넌트에서 사용하는 변수(state)를 바꿔주는 기능
useState: 컴포넌트에서 사용하는 변수(state)를 만들어주는 기능

기존에 변수를 선언하던 방식에서 useState를 사용하여 위의 이미지처럼 변수를 보다 간단하게 선언하고 활용할 수 있게 되었다.

지금은 아직 내가 작성한 코드를 벨로그에 올리는 게 어색하고 방법도 잘 몰라서 이론적인 부분을 다루고있다.
어쩌면 지금 나에게는 이론적인 부분이 더 중요할지도 모르겠다.

코딩 실력도, 블로깅 능력도 부지런히 키워서 나만의 TIL, 나만의 코드지갑, 나만의 정성 가득한 회고록(?)을 잘 만드는 그 날 까지...

profile
no record no memory

0개의 댓글