React

하위 페이지에 있는 버튼의 onClick에 index 값을 넘겨줌\---->> onClick={() => openModal(index)}인덱스를 설정하여 원하는 곳의 데이터 값만 바꾸기 위해 state를 하나 더 만들어줌\---->> const targetIdx, se

https://velog.io/@syj9484/React-String%ED%98%95%ED%83%9C%EC%9D%98-html-%EB%A0%8C%EB%8D%94%EB%A7%81%ED%95%98%EA%B8%B0와 같이 태그를 단일태그로 바꾼 후, dangerou

src 안에 있는 index.js 파일에를 넣는다.즉,\--기존--\--코드 넣음--상위폴더에 .env 파일을 만들어서코드를 입력하고package.json 파일에는 scripts 영역에를 추가하기끄읏-

React에서 서비스를 개발하는 데 있어 독립적인 단위로 쪼개어 구현가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화 하는 프로그래밍 개념JavaScript 내에서 UI를 작성하기 위해 개발자에게 익숙한 환경을 제공, HT

React 프로젝트를 손쉽게 생성할 수 있도록 도와주는 '보일러플레이트(Boierplate)'수많은 React용 보일러플레이트가 있지만 메타(이전의 페이스북)에서 직접 만들어서 관리하는 Create React App이 가장 많이 쓰임프로젝트 생성에 필요한 다양한 기능을

함수 호출과 객체 생성을 위한 문법적 편의를 제공하는 JavaScript의 확장HTML과 비슷하게 생겼으나 JavaScript이고 HTML과 다른 부분이 엄연히 있음Babel에 의해서 Tracnscompile 된다.위의 코드처럼 리액트가 js로 변환되어 있는 코드보다

React에서 페이지를 구성하는 최소단위Component의 이름은 대문자로 시작Class Component/Function Component로 나뉨Controlled Component/Uncontrolled Component위와 같이 Component를 만들고 아래의

기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며 넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 Javascript 요소라면 제한이 따로 없다.주로 Component의 재사용을 위해 사용한다.Props의 값을 임의로 변경해서 사용하는 것을 지양한다.\

State란 Component 내에서 유동적으로 변할 수 있는 값을 저장한다. 개발자가 의도한 동작에 의해 변할 수도 있고 사용자의 입력에 따라 새로운 값으로 변경될 수도 있다. State 값이 변경되고 재렌더링이 필요한 경우에 React가 자동으로 계산하여 변경된 부

대표적인 React의 Hook으로는 useState,useEffect,useCallback,useRef, useMemo 등이 있다.기존에는 컴포넌트 내에서 State와 생명주기를 관리하기 위해 반드시 클래스 컴포넌트(Class Componenet)를 사용해야 했지만 개

Lambda와 API Gateway만으로 서버리스를 경험했다고 생각했는데, 더 깊이 들어가 보니 여러 서버리스 서비스들을 엮어 하나의 완성된 워크플로우를 만드는 '오케스트레이션'의 세계가 있었다. 이번에는 개별 함수를 넘어, 복잡한 비즈니스 로직을 지휘하고 프론트엔드와

TDD(Test Driven Development)의 중요성을 체감하기 전에는 "테스트를 먼저 작성하고 코드를 짜라"는 말이 백엔드 로직에서는 이해가 갔지만, 화면을 그리는 프론트엔드에서는 딱히 와닿지가 않았다.

프로젝트를 진행하며 애플리케이션 기능이 많아지고 다루는 데이터가 복잡해지면서 한계를 느낄 때가 있다. 그래서 나는 데이터를 잘 다루기 위해 성격이 다른 클라이언트 상태와 서버 상태를 관리할 때 이 둘의 차이를 명확히 이해하고 분리하는 것이 중요하다고 생각한다. 그래서