[24.08.10] 개인 프로젝트 2일차 - 올림픽 메달 트래커

금메달 수 기준으로 내림차순 정렬하기첫시도.. 아예 정렬이 되지 않음{medalData.sort((a, b) => { return b.gold - a.gold;}).map((data) => { return ( );})} 그런데 입력창이랑 state를 연동해두다보니 입력창에 입력이 발생할 때마다 정렬을 하고있어서 아예 데이터를 추가/삭제할 때만 정렬할 수 있도록 함수로 빼기로 함 // 국가 추가/업데이트 버튼 컴포넌트const sortData = (data) => { return data.sort((a, b) => b.gold - a.gold);}const updateButtonHandler = () => { let updatedMedalData = []; if (children === ..

• format_list_bulleted 일지
• · 2024. 8. 11.
• textsms

[24.08.09] 리액트 개인 프로젝트 1일차 - 올림픽 메달 트래커 만들기

리액트 입문 주차에 들어가면서 개인 프로젝트가 시작됐다. 나라 이름과 메달 개수를 입력하면 금메달 수를 기준으로 내림차순 정렬되는 메달 트래커 사이트다!요즘 바빠서 짧은 영상이나 메달 소식만 조금씩 전해듣고 있지만.. 반가운 기분이었다 ㅋㅋㅋ 큰 틀 나눠보기우선 주어진 요구사항들을 보며 큰 덩어리들을 나눠보았다. 여러 필드의 값 하나로 합치기입력 필드들을 여러 컴포넌트로 나누고나니까 입력 값을 받아오는게 헷갈렸다..일단 시도해본 방법-> 새로운 입력을 받을 state를 만들어서 값 변할 때마다 state 변하게하기-> 최종 확정인 버튼을 누르면 그 state(새로운 입력)을 기반으로 아래 ranking에 보여줄 state 업데이트하기 const [newMedalData, setNewMedalData] =..

• format_list_bulleted 일지
• · 2024. 8. 10.
• textsms

[React] Rendering과 Virtual DOM

Rendering렌더링 트리거1) 첫 리액트 앱을 실행했을 때 2) 리액트 내부에서 state 변경이 발생했을 때- 컴포넌트 내부 state가 변경됐을 때- 컴포넌트에 새로운 props가 들어올 때- 상위 부모 컴포넌트에서 위의 두 이유로 렌더링이 발생했을 때 리렌더링- 컴포넌트 상태에 변화가 생길 때 발생- 여러 상태가 변경됐다면 리액트는 큐 자료구조에 넣어 순서를 관리함 브라우저 렌더링- 브라우저 렌더링과 리액트 렌더링은 서로 다른, 독립적인 프로세스- 렌더링이 완료되고 React가 DOM을 업데이트 → 브라우저 렌더링 (or 페인팅) 브라우저 렌더링 (페인팅) 원리React, Vue.js는 가상돔(Virtual DOM)을 이용해 원하는 화면을 브라우저에 그려준다. Virtual DOM 생성리액트는 ..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms

[React] state

리액트에서 자주 변경되고, 변경된 값이 화면에 출력돼야하는 값이 필요할 때 state를 활용할 수 있다. useStatereact hook 이라고 한다. 이 개념은 추후 자세히 알아볼 예정! const test = useState("초기값");// test: [ 변수: "변수값", 변수를 변경할 수 있는 함수: function() {},]// 따라서 아래와같이 사용할 수 있음 (Destructuring)const [name, setName] = useState('Kim');  제어 컴포넌트import { useState } from "react";const App = () => { const [value, setValue] = useState(""); const onChangeHandler = (..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms

[React] props와 children

props: 컴포넌트 끼리의 정보 교환 방식 특징1) 위에서 아래 방향(부모 → 자식 방향)으로만 흐른다. (단방향)2) 반드시 읽기전용으로 취급하며 변경하지 않는다. childrenprops와 유사하게 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송할 수 있는 방법여는 태그와 닫는 태그 사이에 작성된 값이 자식 컴포넌트의 children이라는 값으로 전달된다. import React from "react";const App = () => { return 안녕하세요!;};function User(props) { return 유저님 {props.children};}export default App; children의 용도1) 레이아웃 컴포넌트를 만들 때 주로 사용import React from "rea..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms

React 프로젝트 생성/구조

CRA (Create React App) 사용1. 터미널에서 yarn 명령어 입력yarn create react-app my-first-react  Vite (비트) 사용하기yarn create vite my-first-vite-react-app --template reactyarn과 달리 --template react 라는 부분이 있다vite는 리액트만을 위해 만들어진 것이 아니므로 어떤 라이브러리/프레임워크를 사용할 것인지 직접 지정해준다 Vite 로 프로젝트 생성한 경우 특징빠른 콜드 스타트, HMR(Hot module replacement) 리액트 프로젝트 구조index.html SPA 리액트 프로젝트의 유일한 html 파일main.jsx에서 UI 요소들을 받아 index.html의 div#roo..

• format_list_bulleted React
• · 2024. 8. 8.
• textsms