본문 바로가기

Front-End/React8

TIL 230811 : react 접해보기 2 (useState, hooks) 지난 시간 리액트 기본 환경세팅과 컴포넌트의 동작 구조에 이어서 리액트의 가장 기본이 되는 훅 중 두가지인 useState와 useEffect에 대해 정리해보려 한다. React hooks 리액트 훅은 16.8버전에 도입된 라이브러리로서, 기존의 클래스를 이용했던 개념을 대체해 함수형 컴포넌트에서도 이를 편리하게 사용할 수 있게 해주는 개념이다. 이에 리액트에서는 기본적으로 제공하는 hook들이 몇가지 있는데 아래와 같다. 기본 지원 hook 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext .. 2023. 8. 17.
TIL 230810 : react 접해보기 1 (JSX) 특강으로 제공된 프론트엔드 내용에 react가 들어간다. 예전부터 보기는 많이 봐왔는데, 등장한 김에 react도 한번 공부해볼까 한다. vue.js 랑 고민이 좀 되긴했는데 아직은 react관련 자료도 많은것 같고 web-app 기반이라 큰 틀에서는 얼추 비슷한 내용도 있어서 react로 이어나가고자 한다. 사전 세팅 node.js 설치 (LTS추천) -> npm, npx 사용할 수 있다. create React App 라이브러리를 사용해서 기본 프로젝트를 만들어준다. npx create-react-app my-react-app react-router-dom 의존성 추가 npm install react-router-dom react 동작 기본 구조 index.html -> index.js -> app... 2023. 8. 10.