ijooha 님의 블로그

[react/공부] Hook이 뭐야?

Hook 알아보기추가로 보면 좋을 링크        Hook? Hook을 사용하면 컴포넌트에서 더 많은 react 기능을 사용할 수 있다.react hook은 정말 다양한데, 가장 중요하고 많이 사용하는 두가지 (state hook, effect hook)을 알아보겠다.         State Hook 전 게시글에서 얘기한 바 있는 그 state가 맞다.State를 통해 컴포넌트는 사용자의 입력과 같은 정보를 기억할 수 있다.전 게시글에서 소개한 사이트의 경우 나라명과 메달 개수를 기억하도록 했다.const ['상태 값', '상태를 변화시키는 함수'] = useState('초기값')상태를 변화시키는 함수를 통해 변하는 값을 계속 저장하고, 상태값으로 이를 렌더 등으로 사용한다.         Effec..

React 시작하기react 공식 페이지         React? 리액트는 작업을 더 효율적으로 하기 위해 만들어진 라이브러리인데,큰 특징이 하나 있다. 변경사항이 생기면 웹 전체를 다시 구축하는 대신가상 DOM과 컴포넌트, state를 통해 변경된 부분만 업데이트 한다. 가상 DOM은 실제 DOM의 가벼운 사본으로, 변경된 부분만 찾아서 실제 DOM에 반영하기 때문에,렌더링 성능을 최적화할 수 있다.         React 시작하기 ** 노드가 설치된 상태여야 함먼저 프로젝트를 생성해준다.그냥 리액트, 그리고 vite 두가지 방식이 있는데 후자가 훨씬 효율적이므로 그것만 정리하겠다. 터미널을 연 후yarn create vite --template react꺽쇠 없이 프로젝트명을 적어주면 된다. 후..

'올림픽 메달 사이트 만들기'과제로 리액트 입문하기GitHub 바로가기         과제 개요 올림픽의 메달 순위를 업데이트 하여, 각 국가별 금, 은, 동, 그리고 총 메달 수를 확인할 수 있는 페이지이다.사용자는 필터 옵션을 통해 메달 종류나 총 메달 수에 따라 국가 순위를 정렬할 수 있다.• 나라와 메달 개수 입력하고 버튼을 클릭해 하단 리스트에 정보 추가 혹은 업데이트• 정렬 옵션 선택으로 리스트 재정렬• delete 버튼으로 리스트 삭제 리액트 구조를 이해하고 state나 props를 적용하기까지가 좀 시간이 걸렸고, 그 외는 할만했던 거 같다!         컴포넌트 구성 App├── Form│ ├── Country│ ├── Medal│ └── Btn└── List └──D..