ijooha 님의 블로그

useState로 부모 자식 컴포넌트 상속 알아보기  우선 html을 보면 자식 부모 요소들이 있다.그와 마찬가지로 컴포넌트도 부모 자식, 형제 관계들이 있는데파일을 따로 만들어 관리하고 (리액트 장점, 유지 보수가 용이)그 파일들을 부모 자식 간 연결을 시켜주면 된다.(형제끼리 연결하고 싶다면, 부모에게 거쳐서 다른 형제로 이동)         예시 먼저Mom이라는 부모 컴포넌트와Child라는 자식 컴포넌트,Sister라는 형제 컴포넌트가 있다고 가정해보자.** 컴포넌트를 쓸 때는 항상 첫 글자가 대문자다. 파일명도 마찬가지 Mom.jsxfunction Mom() { const sendToChild = 'from mom, to child' //html return ( ..

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..