React

React를 사용할 때, 좀 더 편리하게 상태나 기능을 다룰 수 있게 해주는 도구들컴포넌트 내에서 상태를 다룰 때 사용된다. 상태는 어떤 정보나 데이터를 저장하는 공간이라고 생각하면 된다. 예를 들어, 게임에서 목숨이 몇 개 있는지를 저장하고 싶다면 useState를

상태(state)를 더 복잡하게 다룰 때 사용되며 여러 상태에 대한 규칙을 만들어 한 번에 다룰 수 있다.1️⃣ 예시 1) 상자 안에 공이 있다고 상상해보자. useReducer는 그 상자 안에 있는 공을 꺼내서 다양한 작업을 할 수 있게 도와준다. "공을 하나 증가시

React ver JS ver

기존 코드 1. 2개의 useState를 하나로 합치기 수정된 부분만 작성 2. spread 연산자 사용하기 업데이트가 위에서부터 순차적으로 진행되기 때문에 spread 연산자 작성 위치 중요함 3. 이벤트를 함수화 시키기 [e.target.name] :

이 시리즈는 강의에서 모르는 부분을 위한 복습이기 때문에 중간마다 생략되는 부분이 있을 예정current : useRef의 속성(property)const 변수명 = useRef(초기값)current : 초기값동위선상의 컴포넌트 간 데이터 바인딩이 안되기 때문에 공동으

filter : 배열의 각 요소를 확인하고, 제공된 함수에 의해 true를 반환하는 요소들로 새로운 배열을 생성한다.targetId와 일치하지 않는 id를 가진 요소들만 newDiaryList에 남도록 필터링

재밌다..!API를 호출해서 데이터를 불러옴 (const getData) -호출구문은 그냥 외우면 된다.데이터를 필요한 모양으로 다듬어줌 (const initData)다듬어준 데이터를 기존에 사용하고 있던 데이터 자리에 넣어줌 (setData(initData))

배열을 새로운 상태로 설정\-다이어리를 추가하면 기존 다이어리는 사라지고 새로 추가한 다이어리만 남음배열의 이전 상태를 업데이트

const state, dispatch = useReducer(reducer, initialArg, init?)useState를 사용했던 부분을 useReducer로 바꿔줄 것이다!왜? 복잡한 상태변화 로직들을 컴포넌트 밖에다가 분리해놓기 위해서 😀예시)실전)강의 두

현재 구조의 문제점 : onRemove()와 onEdit()은 DiaryItem에 전달되기 위해서 DiaryList를 거쳐가고 있다. Props drilling : 중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것을 의미 모든 데이터를 한 곳에서 관리하

\[React] 감정일기장 만들기 - 1

다음 중 문구 “Priority:5”를 화면에 출력하지 않는 코드는?1)2)3)4)정답 : 4번

Children Prop HTML 방식과 유사 Attribute Prop 여러 정보들을 전달할때 적합

결과 아무것도 클릭하지 않았을 때 버튼 클릭했을 때 ✅ 버튼 명과 탭 내용을 배열로 만들었다 > ✅ UI구조를 작성한다 > 여기서 탭 버튼과 탭 내용은 TabArr=[] 요소 갯수만큼 화면에 출력이 되어야한다. ✅ map메서드를 이용하여 화면에 배열 요소들을

리액트 컴포넌트에서 JSX를 사용할 때, 보통 하나의 최상위 요소로 모든 것을 감싸야 한다. 의미없는 div를 사용하기 싫을 때, Fragment 로 묶어줄 수 있다. html으로

public 에 저장된 파일들은 프로젝트 개발서버 및 빌드 프로세스에 의해 공개적으로 제공된다.예를 들어, 브라우저에서 localhost:1234/game-logo.png 에 접속하면 해당 이미지를 볼 수가 있다.파일들이 공개적으로 제공되지 않기 때문에 localhos

설명은 나중에..

즉 state 관리를 Child1 과 Child2 모두에 접근할 수 있는 '상위 컴포넌트'에서 하라는 뜻※ 참고 : props는 문자열뿐만 아니라 숫자, 배열, 객체, 함수 등 다양한 타입의 데이터를 전달할 수 있다.

React로 구현된 간단하고 직관적인 To Do List 애플리케이션입니다. 사용자가 편리하게 할 일을 추가하고 삭제할 수 있도록 UI가 간결하게 구성되어 있습니다. 또한, 모바일과 데스크톱에서 모두 잘 작동하도록 반응형으로 디자인되었습니다.새 작업 추가작업을 완료됨으

SearchBox 컴포넌트에서 props라는 매개변수를 사용하면, 부모 컴포넌트에서 전달한 모든 props가 이 객체에 포함된다. 컴포넌트 내에서 props.setSearchValue와 props.searchValue로 각각의 값을 사용할 수 있다.

첫번째 onChange 속성에 handleChange 함수를 직접 할당하고 있다. React는 이 함수를 이벤트 핸들러로 사용하게 된다. 두번째 onChange 속성에 익명 함수를 할당하고 있다. 즉, onChange 이벤트가 발생할 때마다 새

\[JavaScript] 취향에 맞는 과일 추천해주기 를 리액트로 리팩토링 해보기리액트는 상태 업데이트가 비동기적으로 처리되므로, 상태 변경 직후 콘솔 로그를 찍으면 아직 렌더링 전이기 때문에 이전 값이 출력된다. useEffect는 상태가 변경되고 렌더링이 완료된 후