전체 글133 [모던 리액트 Deep Dive] 6장 리액트 개발 도구로 디버깅하기 6.1 리액트 개발 도구란?리액트 애플리케이션의 개발 도구인 react-dev-tools가 있다. 브라우저에 리액트 개발도구를 브라우저 확장 도구로 설치하여 사용할 수 있다. 설치하면 우측 상단에 리액트 로고가 표시돼있는데 회색이면 사용할 수 없고, 빨간색이면 정상 작동, 파란색이면 배포된 웹사이트도 사용할 수 있다는 뜻이다.6.2 리액트 개발 도구 설치https://ko.react.dev/learn/react-developer-tools React Developer Tools – ReactThe library for web and native user interfacesko.react.dev 6.3 리액트 개발 도구 활용하기6.3.1 컴포넌트 Components현재 리액트 애플리케이션의 컴포넌트 트리를.. 2024. 11. 18. [TIL] zustand 사용 시 state.state와 getState()의 차이 1. useUserStore((state) => state.isLoggedIn)특징React 컴포넌트에서 주로 사용: 이 방식은 Zustand 상태를 React 컴포넌트에 연결합니다.Zustand의 상태(isLoggedIn)를 구독(subscribe) 합니다.상태가 변경되면 컴포넌트가 자동으로 다시 렌더링됩니다.상태 관리와 React의 재렌더링 메커니즘이 결합됩니다.예시function Header() { const isLoggedIn = useUserStore((state) => state.isLoggedIn); return {isLoggedIn ? "Logged In" : "Logged Out"};}장점React와 상태의 동기화가 자동으로 이루어짐.상태가 변경되었을 때 React 컴포넌트를 다시 렌.. 2024. 11. 17. [모던리액트 Deep Dive] 5장 발표자료 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.웹 서비스에서 보여지는 거의 모든 부분을 이 상태로 관리한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장리액트처럼 SPA의 경우, 하나의 페이지로 앱을 다뤄야 하다보니 단 하나의 Controller가 여러가지 View와 Model을 관리하면서 복잡해졌다.한 View에서 일어난 상호작용 때문에 여러 Model이 변경되거나, 그 반대의 일이 벌어지는 부수효과도 여러 발생하여 어디서 발생한건지 추적이 어렵다보니 유지보수에도 안 좋다.양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함.. 2024. 11. 15. [React] input 값을 useState로 상태 관리 할 때 defaultValue를 왜 사용하면 안될까? 사이드프로젝트 하는 중 마이페이지에서 닉네임을 가져와야하는데 작은 문제가 생겼다.처음에 로그인한 유저의 닉네임을 그대로 가져오기 위해 input 태그에 defaultValue={user.nickname}을 하고,닉네임 변경하기 위해 새로운 닉네임 값으로 value={nickname}을 속성에 넣었더니 아래처럼 에러 메세지가 찍혔다. value와 defaultValue를 같이 쓰지 말라는 거였다. 왜 안될까? 이유는 value와 defaultValue가 서로 다른 방식으로 동작하기 때문이다.defaultValue: 컴포넌트가 처음 렌더링될 때만 적용되는 초기 값. 상태가 아닌, 기본적으로 입력될 값으로 한 번만 설정된다.value: 컴포넌트의 상태를 직접적으로 반영한다. useState로 상태를 관리하고.. 2024. 11. 15. [프로그래머스 Lv.1] 비밀지도 javascript function solution(n, arr1, arr2) { const answer = []; for (let i = 0; i 다시한번 짚고 넘어가는 toString()과 padStartnum.toString(2) : 배열이 아닌 정수에 toString 메서드를 쓰고 인수에 숫자를 넣으면 해당하는 진수법으로 변환해준다.padStart(str.length, "any") : 첫번째 인자는 인덱스가 아닌 문자열의 길이를 넣는다. 원하는 길이가 될때까지 채운다. 두번째 인자는 첫번째 인자의 길이가 될때까지 채우는 내용이다. 2024. 11. 14. [프로그래머스 Lv.1] 푸드 파이트 대회 javascript function solution(food) { let answer = ''; // food 배열의 첫 번째 요소(food[0])는 무시하고, // 두 번째 요소부터 반복문을 돌리기 for (let i = 1; i 2024. 11. 14. [모던리액트 Deep Dive] 5장 리액트와 상태 관리 라이브러리 5.1 상태 관리는 왜 필요한가?상태는 어떠한 의미를 지닌 값으로 애플리케이션의 시나리오에 따라 지속적으로 변경될 수 있는 값을 의미한다.5.1.1 리액트 상태 관리의 역사 Flux 패턴의 등장 양방향 데이터 바인딩이 아닌 단방향으로 데이터 흐름을 변경함Action -> Dispatcher -> Model -> View 액션(action) : 어떤 작업을 처리할 액션과 그 액션 발생 시 함께 포함시킬 데이터를 의미한다. 액션 타입과 데이터를 각 정의해 dispatcher로 전달한다.디스패처(dispatcher) : 콜백 함수 형태로 액션이 정의한 타입과 데이터를 모두 store로 보내는 역할을 한다.스토어(store) : 실제 상태의 값과 상태를 변경할 수 있는 메서드를 가지고 있다.뷰(view) : 리.. 2024. 11. 14. [프로그래머스 Lv.1] 콜라문제 javascript function solution(a, b, n) { let total = 0; while (n >= a) { // 받을 수 있는 콜라 수 (정수 나눗셈으로 계산) const newCola = Math.floor(n / a) * b; // 받은 콜라 수 총합 total += newCola; // 남은 콜라병 + 교환하고 남은 병 n = newCola + (n % a); } return total;} 2024. 11. 12. [모던 리액트 Deep Dive] 3장 리액트 훅 깊게 살펴보기 3.1 리액트의 모든 훅 파헤치기3.1.1 useState함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 훅이다.import { useState } from "react";const [state, setState] = useState(initialState); initialState에는 state의 초깃값을 넘겨준다. 아무런 값이 없으면 undefined다.useState 훅의 반환 값은 배열이며, 배열의 첫번째 원소로 state 값 자체를 사용할 수 있고, 두번째 원소인 setState 함수를 사용해 해당 state의 값을 변경할 수 있다.useState의 클로저는 useState 내부에 선언된 함수(setState)가 함수의 실행이 종료된 이후에도(useState가 호출된 .. 2024. 11. 10. [프로그래머스 Lv.1] k번째 수 function solution(array, commands) { let answer = []; for(var i=0; i(a - b)); answer.push(list[commands[i][2]-1]); } return answer;} 2024. 11. 8. [프로그래머스 Lv.1] 문자열 내 마음대로 정렬하기 javascript function solution(strings, n) { return strings.sort((a, b) => { // n번째 글자가 다르면 n번째 글자를 기준으로 정렬 if (a[n] !== b[n]) { return a[n].localeCompare(b[n]); } // n번째 글자가 같으면 전체 문자열을 기준으로 정렬 return a.localeCompare(b); });} 이번문제에서도 localeCompare() 라는 메서드를 새로 알게 되었다.referenceStr가 compareString 전 혹은 뒤에 오는지 또는 동등한지를 나타내는 정수를 반환합니다.compareString 전에 reference.. 2024. 11. 6. [모던 리액트 Deep Dive] 2장 리액트 핵심 요소 깊게 살펴보기 2.1 JSX란2.1.1 JSX의 정의JSX는 자바스크립트 표준이 아닌 페이스북 팀에서 만든 새로운 규칙이며, 반드시 자바스크립트 코드로 변환되어야 한다.JSX의 목표는 JSX 내부에 트리 구조로 표현하고 싶은 다양한 것들을 작성해 두고, 이 JSX를 트랜스파일이라는 과정을 거쳐 자바스크립트가 이해할 수 있는 코드로 변경하는 것이다. JSX는 JSXElement, JSXAttributes, JSXChildren, JSXString 네 가지로 구성되어 있으며, 개발자는 이는 확장성이 용이하게 디자인된 문법으로 이해할 필요가 있다 .JSXOpeningElementJSXClosingElementJSXSelfClosingElementJSXFragmentchildren 사용자가 컴포넌트를 만들어 사용할 때에는 반.. 2024. 11. 6. 이전 1 2 3 4 5 6 ··· 12 다음
