React

말그대로 한개의 페이지로 이루어진 어플리케이션. \--기존 MPA의 문제점(Super easy version) 페이지를 계속 로딩해야하는 불편함이 지속됨SPA의 장점 \-한개의 페이지로 구성된 웹 앱 \-서버에 1회만 리소스를 요청 \-데이터만 받아와서 수정 \

특징1.class를 반드시 선언해주어야 한다.2.render() 메소드를 반드시 선언해주어야함.3.Component로 상속을 받아야함.특징1.클래스형에 비해 간단함.리랜더링할때 값을 유지props를 불러올 필요없이 호출가능코드의 간결성JSX문법이란, Javascript

const App = () => { const inputId, setInputId = useState(""); const inputPwd, setInputPwd = useState(""); const clickHandle = () => { alert(아이디는

javascript코드로 css코드를 작성하는 것으로 components 를 꾸미는 방식최근에 인기가 많은tailwindcss, styled-components중에 사용하면된다.vsCode에서 vscode-styled-components 플러그인 설치해당 코드처럼 맨앞

가장 기본적인 hook함수형 컴포넌트 내에서 가장 가변적인상태ex) const state, setState =useState(초기값);useEffect: 랜더링될때마다, 특정한 작업을 계속 수행하도록하는 훅UseState 와 useEffect를 같이 사용할때 useSt

불필요한 렌더링을 발생시키지 않는 방법들1 memo(React.memo) : 컴포넌트를 캐싱2 useCallback : 함수를 캐싱3 useMemo : 값을 캐싱컴포넌트를 메모이제이션하는 것export default 컴포넌트 -> export default React.

react-router-dom을 활용한 페이지 이동처리styled-compoenet를 이용한 스타일링 적용context api를 이용한 전역 상태 관리redux를 이용한 전역상태 관리Styled-componenet를 이용하여 스타일링전역 스타일에 reset.css적용하

Styled-component로 모든 시멘틱태그를 만든다.SendPage에서 데이터를 생성할때마다 Home.jsx에 props로 newMessage를 올려서 useState로 list화를 시킨뒤에 자식컴포넌트들로 뿌려준다.const updatedList = todo,

UseState \- 상태관리에 가장 용이한 hook이라고 생각하면 된다. \- 값이 변경될때마다 렌더링을 발생시킨다.해당코드는 값이 바뀔때마다 계속해서 렌더링을 계속해서 해주기때문에 React에서 렌더링을 최소화해야 하는 우리로써는 전부 useState만 사용하게

배열안의 5개의 리스트에서 하나를 클릭하면 클릭한 하나의 메뉴가 색이 변하면서 List가 필터링되는 기능1: handleMember함수가 실행되면 배열에 저장된(member)에 따라서 setUseState에 값을 넣고 매개변수로 받는 handleSelectedMembe

Props를 통해서 화면 구성을 완료 -> Context API

Redux란?? Javascript상태관리 라이브러리로서 동일한 데이터를 한곳에서 가지고온다.Store => 상태관리하는 공간Action => 앱에서 스토어에 운반하는 데이터를 말한다(javascript객체형식)Reducer => Action을 리듀서에 전달을하고,