공부블로그

이거땜에 ㄹㅇ 하루종일 삽질을 해버렷다... todo list에서 분명 항목을 삭제했는데 수정하려고 클릭하면 계속 다른 값이 나오는 문제였다....왜냐면 코드가 이랫기 때문... //props로 받은 todoItem const Item = ({ todoItem, index } : Props) => { ... const [updateText, setUpdateText] = useState(todoItem.title) console.log('todoItem,title : ',todoItem.title ) console.log('updateText : ',updateText) } 변경된 todoItem이 전혀 반영되지 않는다 props를 useState에 할당하면 안되는 이유 useState는 최초 한번만 호..

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. 벨로퍼트 깃북) 가장 간단히 설명하자면, 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해줍니다. 리덕스에서는 기본적으로는 액션 객체를 디스패치합니다. 일반 액션 생성자는, 다음과 같이 파라미터를 가지고 액션 객체를 생성하는 작업만합니다: 만약에 특정 액션이 몇초뒤에 실행되게 하거나, 현재 상태에 따라 아예 액션이 무시되게 하려면, 일반 액션 생성자로는 할 수가..

리덕스(Redux) 여러분의 앱의 상태 전부는 하나의 저장소(store)안에 있는 객체 트리에 저장됩니다. 상태 트리를 변경하는 유일한 방법은 무엇이 일어날지 서술하는 객체인 액션(action)을 보내는 것 뿐입니다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 여러분은 리듀서(reducers)를 작성해야 합니다. + typesafe-actions는 타입 정의를 쉽게 해주는 패키지다! ★ 리덕스에 사용되는 키워드 액션 (Action) : 스토어의 상태를 바꾸고 싶을 때, 액션이란 것을 발생시켜야 리듀서가 상태를 변경. 하나의 객체로 표현되고 type을 가져야 한다. 액션 생성 함수 (Action Creator) : 액션 개체를 만드는 함수. 파라미터를 받아와서 액션 객체 형태로 만들어준다. 컴포넌트..

이 글은 유튭 코딩애플님의 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..

1. 작업환경 준비 Node.js ( 자바스크립트 런타임 ) 와 Yarn ( 자바스크립트 매니저 도구 )를 설치한다. 설치 확인 ) 명령 프롬프트에서 > node -v v14.17.2 > yarn -v 1.22.10 git을 사용할 경우에는 Git Bash를 설치하고, VS Code를 사용할 것이므로 VS Code도 설치한다. 2. VS Code에서 내 git repository 연결 1) VS Code에서 F1을 누르고 git clone입력 -> Git: Clone 메뉴 선택 2) 내 Git에서 생성한 레포지터리 URL을 입력 3) 클론 시킬 폴더 선택하면 끝! 3. 새로운 리액트 프로젝트 만들기 npx create-react-app begin-react 위 명령어를 입력하면 begin-react 라는..