우리가 현재 TodoList를 만들기위해 컴포넌트에서 props를 통해 각각 상태관리하고 있는 관계도를 보면넘겨주고~ 넘겨받고~ 굳이 여기서 사용하지 않아도될 것인데 들어가야하고 등등불필요한 과정과 요소가 들어가있다이 과정을 줄이고 명료하게 해결할수 있는것이 바로 co

components 폴더안에 TodoItem.js 파일을 만들어주고 아이템 리스트 컴포넌트를만들어보자여기서 사용해야 할 아이콘은 따로 있으니 다른 사이트에서 가져와보자react-icons라는 사이트에 들어와서 MdDone하고 MdDelete 라는 아이콘을 쓸건데, 어

먼저 배경을 만들어보자 이제 npx create-react-app 같은 기본적인건안말할거임 !먼저 styled-components에서 createGlobalStyle 를 import해주고모든 화면에 공통적으로 써줄 스타일인 GlobalStyle이라는 컴포넌트를 만드는데

useEffect는 이전에 hook을 거는것과 같다고 배웠다 업데이트 직전에 ! 종료되기 직전에 !값이 수정되거나 바뀌거나 할 때 ! 등등 무언가 발생하기 직전에 이벤트를 발생시킬수 있는그런 함수라고 생각하면 편하다우리가 props로 받아오는 값을 참조하거나 혹은use

항목을 선택했을때 항목의 색깔이 변경되게 수정해보자이렇게 이름을 누르면 초록색으로 바뀌는게 목표다먼저 유저데이터에 active라는 설정값을 만들어주자이름은 무엇으로 하든 상관 없지만 이해하기 쉽고 직관적인걸로 만들자 항상첫번째 값에만 true값을 준 이유는 제일 상단에

자 배열에 항목을 추가했으니, 반대로 삭제하는법도 알아보자이렇게 유저리스트 목록 옆에다가 '삭제'버튼을 만들어주자그럼 요렇게 이제 생성이 딱 되고유저리스트 컴포넌트는 이제 삭제하는 함수의 값도 받아와야 하기 때문에 props로 onRemove라는 값을 넣어주자onRem

먼저 CreateUser.js라는 컴포넌트를 만들어주자 ![](https://images.velog.io/images/catdev/post/b0a4faf0-0721-42c4-95cf-18d2a93926fc/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%

특정 DOM을 선택할때도 쓰이기도 하지만컴포넌트가 리렌더링 될 때 마다 계속 값을 기억해야할때도 사용한다 useRef로 관리하는 값은값이 바뀌어도 컴포넌트가 리렌더링 되지 않는다 ! 상단에 import useRef먼저 해주고우리가 전에 userList.js에 만들어놓은

먼저 비효율적인 방법으로 배열안에있는 객체의 데이터를 렌더링해보자, 효율적인건 이 다음에 ! 먼저 유저리스트라는 컴포넌트를 만들어주고, users 라는 배열을 만들어주자그리고 이 배열안에있는 원소들을 하나하나 렌더링 해주는 jsx코드를 작성하자user의 name을 보

먼저 input을 활용해 이름과 닉네임을 지어줄수있고, 초기화도 할수있는 기능을 만들자이렇게 이름과 닉네임을 지으면값: 이라는 부분에 똑같이 입력이 되게끔 만들자 useRef라는 라이브러리를 import 해주고nameInput 이라는 객체를 만들어주고 ! 이 객체는 우

리액트는 HTML 파일을 이쁘게 만들어주는 도구일뿐 특별한게 아니다 ! SPA : Single Page Application원페이지 앱 인데, 자바스크립트를 이용해서 페이지는 하나인데 ! html파일을 갈아끼워서 페이지를 나누고 바꾸고 한다(장점은 모바일앱처럼 부드럽게

디테일 페이지에 접속을 해서, Detail 컴포넌트가 로드가 되고나서! 로컬스트로지에 저장되야하니까 우리는 Detail 컴포넌트 안에다가 만들어줄거다 ! 먼저 컴포넌트 안에 useEffect로 만들어주자그러면 1번 항목은 끝났다 ! 일단 누군가 들어가서 상품을 저장했다

우리가 기껏 장바구니에 다 담고 해놨는데새로고침 하거나 재접속하면 다 사라지고 기본값으로 돌아간다 ㅠ왜냐면 새로고침하면 자바스크립트는 파일을 첨부터 위에서부터 쭉 다시 읽기 때문에 그런다고 합니다..크게는 두가지 방법이 있는데 우린 DB가 없으니 미루고브라우저 저장공

먼저 예시용 컴포넌트를 3개 만들어보자부모 컴포넌트와 자식 컴포넌트 2개이다부모 컴포넌트에는 이름과 나이값을 넣어주고 자식들에게 props를 주게되면 자식들은 그 값을 props로 물려받을수 있다 근데 갑자기 이름(데이터)을 바꾼다면? 이렇게 변하지 않을까? 이건 아주

우리 보통 이름이 없는 가벼운 함수 만들어서 사용할때 이렇게 jsx 안에다가 적어서 사용했는데 이렇게 사용하면 용량을 꽤나 먹는다이렇게 쓰지말고 그냥 따로 함수로 만들자 이런식으로 말이다,, 그리고 이렇게 첨부해서 사용하는 습관을 들이자 스타일도 이렇게 오브젝트 형식으

먼저 자바스크립트에서의 동기방식을 알아보자이제 리액트에서의 동기방식을 알아보자강사님의 명강의였다.. ..

강사님의 간략한 명강의다..

이제 메인페이지에서 상품을 누르면각 상세페이지로 넘어갈수있게 만들어주자 ! 일단 누르면 무언가 작동해야하니, onClick를 넣어야하는데컴포넌트에는 이런 이벤트를 달면 안된다 ! 가끔 에러가 난다.그러니 function으로 만들어놓은 컴포넌트 안에다가 !! 넣어주자 이

어려우니까 무한복습 ! redux 왜 쓴다구요? 우리는 수정방법을 reducer로 만들어놓는다 ! 그거를 dispatch로 실행해달라고 부탁한다 ! 즉 상태관리에 용이하다 ! 우리 전에 이렇게 복잡하게 해야 다른파일에 있던 store 쓸수있던거 기억납니까..?이거 옛날