React Basic

react를 시작하기 전 가장 기초적인 개념 정리

React CSR개념 설명, JSX 작성 유의사항, React.StrictMode Tip

react-components props받아오기 components-tip css-box-shadow-site

만약 onClick이벤트의 evnet를 출력할 경우 SyntheticBaseEvent 객체가 출력되는데 이는 React가 브라우저에서 발생하는 이벤트를 React에서 처리할 수 있는 이벤트로 한 단계 더 감싸 객체로 만들어 EventListener로 전달해주는 것이다.

React에서 UI와 밀접하게 관련있는 데이터는 State에 보관해줘야 한다.만약 아래와 같이 setCount(count + 1)를 5번 작성하면 어떻게 동작할까?결과는 5씩 증가가 아닌 1씩 증가한다.이는 Javascript 클로저와 밀접한 관련이 있다. onClic

React 컴포넌트의 생애 주기 (생명 주기)탄생(화면에 나타나는 것 Mount) -> 변화(업데이트(리렌더) Update) -> 죽음(화면에서 사라짐 UnMount)React는 기본적으로 Lifecycle마다 실행할 수 있는 메서드를 가지고 있다.ComponentDi

useReducer

Immer useReducer를 사용할때 중첩된 객체가 많으면 많을 수록 불변성의 특징으로 인해 코드가 복잡해진다. 좀 더 직관적인 방법으로 코드를 작성하고 싶다면 Immer를 사용하면 된다. Immer는 직접 관리해야 되는 불변성을 대신 관리해준다고 생각하면 된다.

context는 React 컴포넌트 트리 안에서 전역적(global)이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법입니다. 예시 위 이미지처럼 컴포넌트 트리가 있다고 가정해본다. 만약 A-1에서 A-2로 상태값을 공유해야 한다면 A-1의 state를 A

routing이란 클라이언트에서 url을 요청했을때 서버에서 요청된 url에 해당하는 데이터를 클라이언트로 전달해주는 행위다.일반적으로는 새로운 html파일을 받아 업데이트 한다. (페이지의 새로고침)CSR에서는 url을 요청했을때 데이터를 받아와 업데이트는 되지만 페