heyday2024 님의 블로그

useState 사용 시, 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때, Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었음. 이 과정에서 크게 3가지 불편한점이 발견됨: 1. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야함! 2. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야함.  즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미. (조부모 → 부모 → 손자) 3. 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없음. ==> 이러한 useState의 불편함 때문에 만들어진 도구가 Redux리덕스는 상태 관리를..

리-렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리-렌더링 된 경우 자식 컴포넌트는 모두==> 리액트에서 리렌더링이 자주 발생한다?? 그것은 비효율적인 코드!! ==> 여기서 발생하는 cost를 최대한 줄여야 그 성능이 향상됨.  최적화(Optimization) 필요!! ==> 어떻게하면 불필요한 렌더링을 줄일 수있을까??memoization을 이용하자!!!1. memo(React.memo) : 컴포넌트를 캐싱 ( 고차 컴포넌트(Higher-Order Component, HOC) : 다른 컴포넌트를 받아서 새로운 컴포넌트를 반환하는 함수 )2. useCallback : 함수를 캐싱 (react hook) 3. useMemo : 값을 캐..

1. useStateuseState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌.  const [state, setState] = useState(initialState);- useState 라는 함수가 배열을 반환하고, 이것을 구조 분해 문법으로 꺼내놓은 모습.- 위 코드에서는 state를 변수로 사용했고, setState를 이용해서 state 값을 수정할 수 있었음.- 만약 state가 원시 데이터타입이 아닌 객체 데이터 타입인 경우에는 불변성을 유지해줘야함.(spread operator 사용.)   1. 직접 새로운 값을 전달하기setState 함수에 직접 새로운 값을 전달하여 상태를 업데이트.이 경우, 이전 상태를 참조하지 않으므로 단순히 새로운 값을 설정하는 상황..

지금까지 사용해봤던 css 스타일링을 적용 방법: 1. inline styling: 태그에 style 속성을 사용하여 직접 스타일 지정하는 방법. JSX 문법을 사용하므로 {{ key: 'value' }} 형식을 사용해야 함. ({객체 형식} 필수!!!) 2. 순수 html처럼 className을 정해놓고 css 파일에 해당 요소 스타일 정의하기. ==> 하지만 위 두 방식은 조금 비효율적일 수도 있음!!! Inline 스타일링의 단점:가독성 저하: 스타일이 컴포넌트와 뒤섞여 코드가 복잡해지고, 특히 스타일 코드가 길어지면 구조가 흐려짐.재사용성 부족: 같은 스타일을 다른 요소에 재사용하려면 중복 코드 발생.Pseudo-classes 및 Media Queries 제한: :hover, :active 같은 ..

https://dongeul24.github.io/olympic-medal-tracker/  올림픽 메달 트래커 dongeul24.github.io국가 및 메달 수 추가: 사용자는 국가 이름과 해당 국가의 금, 은, 동 메달 수를 입력하여 새로운 국가를 추가할 수 있습니다.만약 이미 등록된 나라를 추가하고자 한다면, 이미 등록된 국가라고 사용자에게 알려줍니다(alert). 또한, 사용자가 국가명을 적지 않거나, 글자 없이 띄어쓰기만 되어있는 경우, 미리 정의된 유효성 검사에 의해 국가명을 입력하지 않는 한 추가되지 않습니다. (+ form 태그를 사용하여 자동으로 required 속성에 의해 유효성 검사를 해줍니다...)또한, 최대 입력할 수 있는 국가 이름 글자수(세계에서 가장 긴 국가명은 60자를 넘..

일단 리액트는 처음이라 막막하다....막막하지만! 일단 해보자구요...  먼저, vite를 이용해서 리액트 프로젝트를 손쉽게 만들어주었다. 나는 항상 css 스타일링 하는게 제일 손이 많이 가고, 시간이 많이 걸린다고 생각한다. 그래서 부트스트랩을 이용할까하다가 뭔가 새로운 방식으로 css 스타일링을 하고 싶어서 검색했다.그때 눈에 들어온 tailwindCSS.  Tailwind CSS는 유틸리티 퍼스트 CSS 프레임워크로, 클래스 기반의 스타일링 접근 방식을 제공한다고 한다.즉, 부트스트랩처럼 미리 정의된 스타일을 쓰는 건데, Tailwind CSS는 뭐랄까.. 좀 더 자유도가 높은 느낌이다.미리 정해진 스타일들을 내가 원하는대로 조합해서 쓰는 형식!! 확실히 부트스트랩은 컴포넌트가 다 만들어져 있어서..

Compoment컴포넌트는 리액트의 핵심 빌딩 블록 중 하나==> 리액트에서 개발할 모든 애플리케이션은 컴포넌트라는 조각으로 구성됨.  컴포넌트는 UI 구축 작업을 훨씬 쉽게 만들어주기 때문에 사용함. 재사용 가능UI 요소를 표현하는 최소한의 단위이며 화면의 특정 부분이 어떻게 생길지 정하는 선언체임! 리액트의 컴포넌트기반 개발 이전에는 브라우저에서 동적으로 변하는 UI를 표현하기 위해 직접 DOM 객체를 조작하는 명령형 프로그래밍 방식으로 구현 1. DOM (명령형 프로그래밍): 프로그래머가 컴퓨터에게 "어떻게" 작업을 수행할지를 명시적으로 지시하는 스타일// Hello, World! 화면에 출력하기// 순수 javaScript 명령형 코드const root = document.getElementByI..

React Components컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음. 개념적으로 컴포넌트는 JavaScript 함수와 유사함. “props”(properties에서 따옴)라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환함 1. 함수형// props라는 입력을 받음// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)function Welcome(props) { return Hello, {props.name};}// 훨씬 쉬운 표현을 해보면 아래와 같죠.function App () { return hello}--->  입력을 받아도 되고 안 받아도 됨.==> 주..

npm VS yarn 공통적 특징둘다 자바스크립트 런타임 환경(아래에서 더 확인할게요 🙂)인 노드(Node.js)의 패키지 관리자애플의 앱스토어, 구글의 플레이스토어처럼, 전 세계의 많은 개발자들이 본인들이 만든 유용하고 다양한 패키지들 또는 프로그램을 ‘온라인 데이터베이스’에 올려놓습니다. 그걸 쉽게 설치하고 삭제할 수 있도록 도와주는 관리자에요.차별적 특징NPMnode.js를 설치할 때 자동으로 설치됨Node Package Manager의 약자JavaScript 프로그래밍 언어를 위한 패키지 관리자로, 수많은 JavaScript 라이브러리와 애플리케이션을 호스팅하는 레지스트리 역할을 합니다.YARN2016년에 Facebook, Exponent, Google, Tilde와 같은 회사에서 공동 작업으로..

ttps://react.dev/ ReactReact is the library for web and native user interfaces. Build user interfaces out of individual pieces called components written in JavaScript. React is designed to let you seamlessly combine components written by independent people, teams, and organizatireact.dev- React 공식 홈페이지: "React는 UI 를 만들기위한 라이브러리" React는 라이브러리일까 아님 프레임워크일까??프레임워크?Spring Framework : Java 기반의 웹(백엔드)..