공부블로그

Atoms = Recoil의 상태 atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링된다. 동일한 atom이 여러 컴포넌트에서 사용되는 경우 모든 컴포넌트는 상태를 공유한다. 선언법 : const '원하는 상태 이름' = atom({ key : '보통은 상태 이름과 동일', default : '초기값 like useState의 괄호안의값' }) Selector = 파생된 상태 파생된 상태는 다른 데이터에 의존하는 동적인 데이터를 만들 수 있기 때문에 강력한 개념이다 get으로 가져온 atom을 가공해서 리턴해준다. 선언법 : const '원하는 상태 이름' = selector({ key : '보통은 상태 이름과 동일', get : ({get}) => { const filte..

에러땜에 짱 고생한 redux-thunk를 정리해보게따.... 저번에 redux로 만든 todo-app redux에 middleware중 하나인 redux-thunk를 적용하는 코드를 작성해보자. 아 그리고 change_status 액션도 하나 더 만들었다. redux-thunk 는 뭘 하는 미들웨어일까? (from. 벨로퍼트 깃북) 가장 간단히 설명하자면, 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해줍니다. 리덕스에서는 기본적으로는 액션 객체를 디스패치합니다. 일반 액션 생성자는, 다음과 같이 파라미터를 가지고 액션 객체를 생성하는 작업만합니다: 만약에 특정 액션이 몇초뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가..

이 글은 유튭 코딩애플님의 React 기초 강의를 듣고 정리한 글입니당 https://youtu.be/LclObYwGj90 node.js 는 왜 설치할까? npm이라는 툴을 사용할 수 있다. npm으로 create react app이라는 라이브러리를 설치 각 폴더 설명 node_modules: 라이브러리 모은 폴더 public: static 파일 보관함 ( 이미지 등.. ) src: 소스코드 보관함 ( 실질적인 코딩을 하는 곳 ) - package.json 파일: 설치한 라이브러리명, 버전 목록 메인 페이지 동작원리! Index.js가 App.js을 Index.html에 넣어줌 = App.js(메인 페이지)의 html(return 부분)을 index.html(실질적인 메인페이지)의 id가 root인a d..

▶ Routing : URL에 따라서 적당한 콘텐츠를 전송해주는 것 BrowserRouter는 최상위 컴포넌트를 감싸주어 BrowserRouter를 사용가능하도록 해준다. url에 따라 달라져야하는 컴포넌트에 Route로 감싸주고 path지정 Link : 페이지가 바뀌지 않고 링크로 이동 NavLink : 클릭 시 해당 a태그에 active class생성 => css의 .active로 스타일 변경가능 ◎ 기본 작업 create-react-app 을 통해 새로운 프로젝트를 생성하고 npx install react-router-dom 을 통해 라우팅 도구 설치 후, import { BrowserRouter, Route, Switch, Link, NavLink ,..

태그는 꼭 닫는다. 두 개 이상의 태그는 무조건 하나의 태그로 감싼다. ( 이 때 리액트의 Fragment를 이용하기도 한다. ) 자바스크립트 변수를 보여줘야 할 때에는 { } 중괄호로 감싸준다. 태그에 style과 CSS class를 설정할 때 인라인 스타일은 객체형태로 작성하고 ( class style = { ... } ), CSS class를 설정할 때에는 className= 으로 설정해준다. props를 통해 컴포넌트에게 값 전달하기 1. Hello 컴포넌트에 name과 color라는 props (속성)을 전달해주고 싶을 때 App. js 에서 props 전달 Hello. js 에서 받아서 작성 function Hello(props) { return 안녕하세요 {props..

이벤트( Event ): 사용자가 웹 브라우저에서 DOM요소들과 상호작용하는 것 예를 들어 HTML에서 DOM요소에 이벤트를 설정하는 방법을 살펴보자. //누르면 alert함수를 사용해서 executed문구의 메시지 박스를 띄움 Click me //이 문구의 버튼을 HTML에서는 이벤트를 실행하면 " " 사이에 있는 자바스크립트를 실행하도록 작성한다. 4. 1 ) 리액트의 이벤트 시스템 Say. js import React, { useState } from "react"; const Say = () => { const [message, setMessage] = useState(""); //useState의 인자에는 상태의 초기값을 넣어줌 const onClickEnter = () => setMessage..