React

element는 React앱의 가장 작은 단위 (Component에 포함)브라우저 DOM element와 달리 React element는 일반 (불변) 객체React DOM은 React element와 일치하도록 DOM을 업데이트React 앱은 하나의 root DOM

React의 이벤트명은 보통 camelCase 사용기본 동작을 방지하기 위해선 preventDefault 호출ex) 폼 제출시 새로고침 방지 등등클래스 컴포넌트일 경우 바인딩 유의또는 public class fields로 지정또는 콜백에 화살표 함수 사용그러나 이는 컴

리스트 element를 만들려면 key를 포함해야 한다Key가 있어야 React가 어떤 항목을 변경,추가 또는 삭제할 지 식별할 수 있음 (고유성 부여)대부분의 경우 데이터의 id를 key로 사용정 안되면 index를 key로 사용하지만 state와 관련한 문제가 생길

form element<input> , <textarea>, <select> → 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트React에서 변경할 수 있는 state는 일반적으로 컴포넌트의 state 속성에 관리되고 setState()에

React에서 하나의 컴포넌트에서 여러 개의 요소를 반환하기 위해서 하나의 태그로 무조건 감싸야함사용이유별도의 노드를 추가하지 않고 여러 자식을 그룹화하기 위해 사용사용 예import 없이 쓰고 싶다면 <>(빈 태그) 도 사용 가능

페이지를 새로고침하면 이전에 있던 데이터들이 날라가게 된다.이를 방지하기 위해 localStorage를 활용할 수 있다localStroage브라우저 내에 키-값 쌍의 형태로 저장되는 객체오리진(domain/port/protocol)이 같은 경우 데이터는 모든 탭과 창에

HTML5의 History API에 기반하는 라우팅 라이브러리컴포넌트 기반 동적 라우팅React는 SPA이기 때문에 index.html 이라는 하나의 템플릿에서 컴포넌트를 기반으로 라우팅 및 렌더링설치BrowserRouterindex.js에서 루트 컴포넌트를 Brows

react hook함수형 컴포넌트에서도 react state와 생명주기 기능을 활용할 수 있도록 한 것함수형 컴포넌트도 클래스형 컴포넌트처럼 사용할 수 있게 하기 위함(함수형 컴포넌트는 클래스와 다르게 모듈로 활용하기 쉬움)조건문, 반복문 등을 사용하고 싶다면 반드시

props drilling중첩된 여러 계층의 컴포넌트에게 props를 전달해 주는 것어떤 컴포넌트가 상위 컴포넌트의 state를 활용하려면 중간에 있는 컴포넌트도 (해당 props를 사용하지 않더라도) props를 전달받아야 한다컴포넌트가 한 두개가 아니라 수십개가 넘

Redux상태관리 라이브러리예측 가능한 상태 컨테이너 제공store에 상태를 넣어두고 필요한 컴포넌트에서 가져다 사용설치사용이유store에서 모든 state를 관리하고 있고, action을 dispatch해야 reducer가 state를 업데이트\-> 그 후 해당 st

공식 Redux 는 Redux Tookit 사용을 권장하고 있다 > 기존 Redux와 비교한 장점 복잡한 store 설정 ⇒ 초기 설정이 간편해짐 불변성 유지와 기타 미들웨어 사용 등을 위해 추가적으로 설치되어야 하는 패키지들 immers redux d

Thunk 와의 차이Redux Thunk함수를 dispatch 할 수 있게 해주는 미들웨어Redux Saga액션을 모니터링 하고 있다가 특정 액션이 발생했을 때, 미리 정해둔 로직에 따라 특정 작업이 이루어지는 방식Thunk의 단점redux-thunk는 복잡한 비동기

https://styled-components.com/Javascript 파일에서 CSS를 처리할 수 있게 해주는 라이브러리설치사용법HTML 엘리먼트 스타일링styled.(HTML 태그)(적용할 css)React 컴포넌트 스타일링props 넘겨받을 수 있음st

프로젝트에 일관되게 적용시켜줄 색상, 투명도, 그림자 상태 등을 theme로 정의Mui는 light theme type이 기본 값.theme 생성createTheme() - >theme 객체 반환theme 속성palette: 색상 정보PrimarySecondaryErr

FormDataXMLHttpRequest 전송을 위하여 설계된 특수한 객체 형태문자열화 하려면 특정한 조작이 필요key, value 형식으로 되어 있음header의 content-type을 multipart/form-data 로 반드시 설정해주어야 함file inpu

react에서 axios로 file을 formData에 넣어서 보냈는데 400 에러가 났다.header 설정을 넣어줌근데 이렇게 했는데도 안됬다. 알고보니 서버쪽 코드에 문제가 있었다.FileInterceptor 의 key 이름 체크서버 쪽 컨트롤러 코드에서 @UseI