React 기초

리액트의 장점 1. Singlepage application: 일반적인 다중 페이지 애플리케이션(Multi-Page Application, MPA)은 각각의 페이지에 해당하는 별도의 HTML 파일을 서버에서 받아와 전체 페이지를 새로고침 한다. 반면, 싱글 페이지 애플리케이션은 초기에 필요한 리소스를 한 번 로드한 후, 애플리케이션 내에서 페이지 전환이 ...

UseState 함수에 관하여 리액트의 useState 함수는 기본적으로 비동기 함수이다. 1. useState는 함수는 기본적으로 state가 리렌더링 될 때마다 실행되는 함수이다. 그러면 한번만 렌더링되게 할수는 없을까? 콜백 형태로 값을 넣는다. 2.상태 값을

React에서 props를 전달하는 방법 기본적으로 react에서는 props를 객체로 전달한다. spread 형태로 객체를 펼쳐서 전달 할 수도 있고 부모 컴퍼넌트에서 객체를 생성하여 객체로 전달 할수도 있다. spread를 사용하여 값으로 전달하는 방식과 참조형으

React에서 사용자 입력을 처리하는 방법 1.spread 연산자를 사용하여 객체를 값을 복사하고 복사한 값을 변경 후 useState의 상태를 변화 시키는 방법 2.eventTargetName을 활용하여 값을 변경하는 방법

리액트에서 리스트 컴퍼넌트를 렌더링하는 방법이다. Array.map()메소드를 활용하여 렌더링을 한다. default props를 사용하는 이유 props의 값이 undefined일 때의 값을 정해주는 것이다. 즉, 초기 값 일때의 값을 정하는 것이다.

리액트의 구조 일반적으로 react는 형제 컴퍼넌트끼리는 데이터를 전달 할 수 없다.따라서 root 컴퍼넌트에서 data를 단방향으로 전달해야 한다.렌더링 할 때도 마찬가지다. 즉, 부모 컴퍼넌트에서 이벤트 발생하면 데이터 렌더링한 후 데이터를 다시 부모 컴퍼넌트에 전달하는 방식이다. useState 함수에 관하여 set 메소드는 기본적으로 callbac...

리스트 요소를 삭제하기

리엑트의 Strict Mode 리액트에서 제공하는 검사도구이다. 렌더링 시 함수를 2번 호출 한다. React Lifecycle 컴퍼넌트 탄생(Mount) ex) 초기화 작업 화면에 나타는 것 컴퍼넌트 변화(Update) ex) 예외처리 작업 업데이트 리렌더

주의할점은 usMemo는 콜백함수를 리턴을 받기 때문에 기존 함수는 변수가 된다. 또한 두번째 파라미터로 의존성 배열을 받는다.

리액트에서 형제 컴퍼넌트가 리 렌더링 되면 자신도 리 렌더링된다.React.memo를 사용하면 이를 방지 할 수 있다. 객체와 배열은 비교시 얕은 비교(주소)를 한다.따라서 areEual 메소드를 활용을 하여 동일한 값인지 아닌지를 확인 해야 한다.

메모이제이션 콜백을 반환한다.의존성 배열의 값이 변경될때 에만 변경된 메모이션된 콜백을 반환한다. 기존코드 1.data가 [] 배열인 상태로 첫번째 렌더링 자식 컴퍼넌트 렌더링2.setData로인해 data바뀜 자식 컴퍼넌트 렌더링 최적화코드

useState 대신 useReducer를 사용하면 복잡한 상태관리를 용이하게 처리 할 수 있다. data는 상태값을 의미하고 dispatch는 동기화시키는 메소드이다. 인터페이스를 통해 타입 분리 reducer 메서드는 dispath메서드의 스위치들이라고 보면

1.context를 생성 2.provider를 만들면 props를 사용하지 않고 데이터를 공급 할 수 있으며 코드의 가독성이 좋아진다.Diary.DispatchContext를 중첩으로 사용한다.컴퍼넌트가 리렌더 시 자식 컴퍼넌트에 전달하는 메소드들 때문에 리렌더링이

Multi-page Application (정적 사이트) 기존 html을 클라이언트 측에 전송하는 것이다. 즉,html 파일과 데이터를 조립해서 전송을 하게 된다. 초기 로딩 속도 빠르다. Single-page Application (client side-rendering) client측에서 하나의 페이지를 사용한다. 페이지이동이 쾌적하고 빠르다. 리액트...

React Router에서 콜론(:)은 동적인 URL 매개변수를 나타낸다. 이를 통해 동적으로 변하는 부분을 처리 할 수 있다. useParams를 사용한 커스텀 훅 useParams를 사용하면 동적으로 변화하는 매개변수를 불러 올 수 있다. 리액트 쿼리 매개변수