📌𝗩𝗶𝗲𝘄 𝗔𝗹𝗹(33)
-
useReducer 동작원리 이해하기
useReducer는 전역 상태나 여러 컴포넌트에서 공유되는 복잡한 상태를 관리할 때 유용함. 간단한건 useState를 사용함. 둘다 상태를 변경하는 훅이라는건 동일하다. #예시 - 사용자 입력값의 상태를 나타내는 inputState와, 유효성 검사결과를 나타내는 isValid 상태가 있다고 가정. - 이때 inputState에 따라서 isValid는 true, false로 상태가 달라지게된다. 두 상태값이 서로 연결되어있음. - 요럴때 useState를 두번 작성하기보다, useReducer를 사용해도 된다는거임! 상태를 정의할 컴포넌트 바깥에 reducer 함수를 정의한다. 컴포넌트 내부에 상태를 정의하고, input의 value가 변경될때마다 실행되는 트리거함수도 정의함. 이때, 트리거함수가 실행..
2024.02.21 -
React Router의 Link 컴포넌트 사용하여 페이지 이동시키기
React Router의 Link 컴포넌트와 일반적인 HTML 태그를 사용하는 것의 차이점 #브라우저 내비게이션 방식 태그: 클릭 시 페이지가 새로고침되면서 링크된 주소로 이동한다. Link 컴포넌트: 클릭 시 페이지가 새로고침되지 않고, React Router가 관리하는 페이지로 이동. #SPA에서의 사용 태그: SPA에서는 새로운 페이지를 로딩할 때마다 애플리케이션의 상태를 잃어버릴 수 있다. Link 컴포넌트: SPA에서는 새로운 페이지를 로딩하지 않기 때문에 애플리케이션의 상태를 유지하면서 페이지 간 전환을 수행할 수 있음. 동적라우팅 처리
2024.02.06 -
React 배열타입 데이터 useState 상태 업데이트 예시(feat. axios)
shoes 라는 [{}, {}, {}] 이런 형태의 객체의 배열이 있음 서버로부터 받아온 똑같은 타입의 데이터들을 shoes에 추가하여 상태를 업데이트 하고자함. 스프레드 연산자를 사용해 배열로 감싸주면 간단히 해결! 🤩
2024.01.30 -
JavaScript 스프레드 문법 알아보기
ES6(ECMAScript 2015) 에서 새로 생긴 spread operator. spread operator는 반복 가능한(iterable) 객체에 적용할 수 있는 문법으로, 배열이나 문자열 등을 개별 요소로 분리시킬 수 있다. // ES6에서는 배열에 대한 스프레드 문법 사용 가능 const arr1 = [1, 2, 3]; const arr2 = [...arr1, 4, 5]; 사용하는 이유?🤔 원본배열 또는 객체를 변경하지 않고 새로운 복사본을 만들기 위해서다. 자바스크립트에서 배열과 객체는 참조에 의해 전달되기 때문에 그냥 대입하면 참조 주소만 복사되어 두 변수가 같은 객체를 가리키게 됨. 스프레드 문법 사용할때 vs 사용안할때 차이점은? // 원본 배열 const originalArray = [..
2024.01.29 -
부모/자식 컴포넌트 관계
컴포넌트간에 props 전달 규칙 props를 전달할때 부모 -> 자식 컴포넌트로 전송이 가능하다. 반대로, 자식 -> 부모로는 전달 불가X 같은 루트에 위치한 컴포넌트 끼리도 전달 불가X Q. 특정 State가 부모와 자식 컴포넌트 둘다에서 필요하다. 이때 state 정의는 어디에 해야할까? 👉 부모 컴포넌트. 최상위 컴포넌트에 만드는것이 일반적임.
2024.01.24 -
[JS 알고리즘] 프로그래머스 K번째 수
https://programmers.co.kr/learn/courses/30/lessons/42748?language=javascript 코딩테스트 연습 - K번째수 [1, 5, 2, 6, 3, 7, 4] [[2, 5, 3], [4, 4, 1], [1, 7, 3]] [5, 6, 3] programmers.co.kr 📍 문제 📍 풀이 사용한 메소드는 다음과 같다. slice(start, end): start 인덱스부터 end 인덱스 이전까지 슬라이싱한 배열 반환 sort: 정렬메소드 push: 배열 오른쪽으로 원소 추가됨 코드 작성은 어렵지않은데, sort() 정렬부분에서 주의할점이 있다. 만약 다음과같이 sort()만 해주면 오류가 날것이다. 왜냐하면 자바스크립트는 기본적으로 유니코드 문자열을 비교해서 ..
2021.09.16