React

사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리자바스크립트를 이용한 프론트 엔드 개발을 더 편리하게 해주는 라이브러리 웹사이트들이 복잡해지면서 모던웹에서 빠른 포퍼먼스를 내기위해리액트는 Virtual Dom 을 활용하여 업데이트 해야하는 Dom요소를 찾아서 해당

작성하는 자바스크립트 코드는 Node라는 플랫폼에 의해서 실행된다.노드 설치패키지 매니저 무수히 많은 서드파티 패키지들이 모여있는 집합소이다.리액트를 만드는 패키지를 설치 할 수도 있고, 우리가 리액트를 프로그래밍할때 필요한 여러패키지들을 다운로드 받을 수 있다. np

prop types(https://ko.reactjs.org/docs/typechecking-with-proptypes.html그런데 위 예시에서는 User 안녕하세요 User 이렇게 정보를 보내고 있습니다. User hello='안녕하세요' 이렇게 prop

hook(1) Button과 이벤트 핸들러 구현하기(2) state 구현하고 이벤트 핸들러와 연결하기(1) Input과 state 구현하기 + (2) 이벤트핸들러를 구현하고 state와 연결하기다시 설명하면 사용자가 input에 어떤 값을 입력하면, 그 값을 입력할 때

브라우저는 어떻게 동작하는가?

핸들러를 따로 함수로 빼서 만들기익명함수를 이용해서 만들기

프로젝트 만들기yarn create react-app 폴더이름vscode 열기 생서한 폴더 열기 import React from "react"yarn start project app.js 파일을 css와 jsx 파일로 나누어서 만들어 보자import "./App.css

반복

CustomButton 컴포넌트User 컴포넌트더알아보자자바스크립트 파일 절대경로, 상대경로 설정하는 방법자바스크립트 export, export default, import 각각 무슨차이 인지?

페이지가 전환될때마다 주소창이 다르다React Router Dom : 여러개의 페이지로 이루어져있는 어플리케이션에서 진정한 가치를 발휘할 수 있다. 리액트 라우터 돔 홈페이지 -> quick start라우팅, 라우터: 사용자가 어떤 주소로 들어왔을때 그 주소에 해당하는

조금 더 간편하게 component를 꾸밀 수 있는 CSS-in-JS 방식 => styled-components를 사용 css-in-js방식으로 꾸밀 수 있게 도와주는 패키지 yarn 명령어를 이용해서 styled-components를 설치하자 yarn add styl

useState는 가장 기본적인 hook이며, 함수 컴포넌트에서 가변적인 상태를 가지게 해준다 => 상태관리를 할 수 있게 해준다. 구조분해 할당! 만약에 state의 type이 원시가 아니라 비원시라면 불변성을 유지해야만한다.일반 업데이트 방식 number+1을 3번

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook. 쉽게 말해 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect

state와 props를 이해해야 한다. Redux는 무엇이냐? => 전역상태관리Redux를 사용하지 않는다면, Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었고, Props로 State를 공유하는 방법에는 불편한 점이 있었다. 추가하기 버튼과

패키지 설치 yarn add redux react-redux => redux와 react-redux를 같이 설치 하겠다는 의미의 명령어 React-redux 패키지 => redux를 react에서 사용할 수 있도록 서로 연결해주는 패키지 src 폴더안에 redux폴

리덕스 흐름 도식화값의 수정은 reducer (변화를 일으키는)함수에서 일어난다. => 그럼 우리가 만약에 counter.js 모듈에 있는 number에 +1을 하고 싶으면 => 리듀서에게 보낼 number를 +1 하라는 “명령”을 만든다.=> 명령을 보낸다 => 리듀

훨씬 복잡한 프로젝트를 다루게 될 것이기 때문에 action객체를 하드코딩 하면 수정할 때 불편, action creator 를 사용해야한다.직접 하드코딩을 하는 것이 아니라, 액션객체를 한 곳에서 관리할 수 있도록 “함수"와 액션 value를 상수로 만든다사용하는 이

카운터 프로그램을 사용하는 사용자가 직접 더하고 뺄 숫자를 정할 수 있게 하려한다 => 이제 “N을 더해” 라고 N을 같이 리듀서에서 보내야 한다. 지금까지는 ~을 이라는 목적어가 없었다면, 이제는 그 목적어가 생긴것이고 목적어도 액션객체에 담아 같이 보내줌 = P

Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다.), 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는지 흐름을 그려볼까요A Component에서 Store에 있는

클라이언트가 웹 서버에게 사용자 요청의 목적이나 종류를 알리는 수단이다.GET은 보통 리소스를 조회할 때 사용, 서버에 전달하고 싶은 데이터를 query를 통해서 전달한다.메시지 바디를 사용해서 데이터를 전달할 수는 있지만, 지원하지 않는 곳이 많아서 권장하지 않는다.

Axios 패키지 매니저 설치yarn add axioswww.yourserver.com/login?id=Hnk&pw=1234웹 사이트 뒤에 쿼리스트링이 붙여진 것을 볼 수 있다 => GET은 서버에서 어떤 데이터를 가져와서 보여준다거나 하는 용도 => 주소에 있는 쿼리

리덕스 미들웨어는 리덕스가 지니고 있는 핵심기능 미들웨어 어떠한 두가지 요소의 중간에서 동작하는 소프트웨어라고 생각할 수 있다. 리덕스 미들웨어를 사용하면 액션이 디스패치 된 다음, 리듀서에서 해당 액션을 받아와서 업데이트하기 전에 추가적인 작업을 할 수있다. ->