리액트

:컴포넌트끼리의 정보 교환 방식이다.부모 컴포넌트가 => 자식 컴포넌트에게 물려주는 데이터props는 반드시 위에서 아래방향으로 흐른다. (부모 => 자식)props drilling:부모 -> 자식 -> 그자식 -> 그 자식으로 계속 물려주는 현상props childr

styling map, filter 요소 추가하기 요소 삭제하기

:리액트 컴포넌트를 만들 땐, 함수형과 클래스형이 있고 주로 함수형을 사용한다.리액트 컴포넌트를 만들 땐, import를 통하여 리액트를 불러와주어야 하고,export를 통하여 다른 컴포넌트에서 불러와 사용할 수 있다.자식은 export로 내보내고, 부모는 import

Todolist Todolist 컴포넌트 분리 App.js TodoList.js Layout.js Form.js State.js 깃허브

:css-in-js: 자바스크립트 코드로 css를 만들어내는 방식이다.꾸미고자 하는 스타일일을 styled component로 만들고, 안에 스타일을 작성하는 방식으로 만든다.장점: props를 활용하여 조건부 스타일링을 할 수 있다.css에서 사용할 수 없었던 if,

:가장 기본적인 hook이다. (카운터나 todolist에 활용!)함수형 컴포넌트 내에서 가변적인 상태를 가지게 한다.state:현재값, setState:state를 변경할 수 있는 set함수(최신상태를 나타냄)useState:초기값인 배열( { } )로 이루어져

리렌더링의 발생 조건컴포넌트에서 state가 바뀌었을 때컴포넌트가 내려받은 props가 변경되었을 때부모 컴포넌트가 리렌더링 된 경우 자식 컴포넌트는 모두 리렌더링된다.최적화:불필요한 리렌더링을 줄이기 위한 작업이다.이때문에 나온 hook ▼React.memo: 컴포넌

리덕스의 필요성:상태관리 라이브러리이다. 중앙 데이터 관리소 정도!Local stste(지역상태): 컴포넌트에서 useState를 이용해 생성한 state이다. 좁은 범위 안에서 생성된 stateGlobal state(전역상태): 컴포넌트에서 생성되지 않는다. 중앙화

:다양한 페이지를 구현할 수 있게 해주는 패키지이다.yarn add react-router-dom1.페이지 컴포넌트 작성 -> 다중 페이지2.router을 구성하는 설정 코드 작성3.App.js에 2번을 import하고 적용기본 코드가장 바깥에 BrowserRouter

state:변수 선언의 또 다른 방식변동 시 자동으로 UI에 반영되게 만들고 싶을 때 사용한다.자주 변경될 것 같은 것에 사용한다.setState:변수 값을 변경하는 함수이다.스프레드:괄호를 벗겼다가 다시 씌워주세요! 메모리에 대한 참조 화살표도 방향을 바꿔주세요! 라

문제점: Todolist에 새로운 항목을 추가하고, 상세페이지에서 새로고침을 하게 되면, 저장된 데이터가 아니기 때문에 백지화가 되었다.해결방법1\. 새로고침 시 홈 화면으로 가도록 설정한다.2\. Localstorage를 활용한다.

:새로운 것이 아닌, 리덕스를 더 편하게 쓰기 위한 기능들을 흡수해서 만든 것이다.바뀐 부분은 모듈 파일 뿐!기존 코드toolkit 사용configStore.js1.action value와 action creator모두 없어진다.2.리듀서 대신 createSlice로

:브라우저와 node.js에서 사용할 수 있는 Promise(비동기)기반 HTTP클라이언트 라이브러리이다.yarn add axiosyarn add json-serverCreate Read Update DeleteGET: readPOST: create, update, d

:리덕스에서 dispatch를 하면 action이 리듀서로 전달이 되고, 리듀서는 새로운 state를 반환하게 된다. 근데 미들웨어를 사용하게 되면, 이 과정 사이에 우리가 하고 싶은 작업들을 넣어서 반환할 수 있게 된다.ex)counter카운터 프로그램에서 더하기 버

반복되는 로직이나 기능을 우리만의 훅으로 만든다. :같은 기능을 하는 handler들이 많이 있다면, 하나로 묶어도 되니까! 기존 코드function App() { const title, setTitle = useState(""); const comment, set

:짧은 시간 간격으로 연속해서 이벤트가 발생했을 때, 과도한 이벤트 핸들러 호출을 방지하는 기법이다.(setTimeout메소드를 사용하여 구현할 수 있다.)1.이벤트가 일어난 첫번째에 함수를 일으킨다.2.이벤트가 일어나고, 마지막에 함수를 일으킨다.3.이벤트의 처음과

인증: 서비스를 이용하려는 유저가 등록된 회원인지 확인하는 절차(로그인)인가: 특정 리소스에 접근할 수 있는 권한이 있는지 확인하는 절차(마이페이지)http 프로토콜 통신의 특징무상태: 서버는 클라이언트의 상태를 기억하지 않는다. 따라서 각 요청마다 서버에서 요구하는