'항해 중/3주차 리액트 기초반' 카테고리의 글 목록
본문 바로가기

항해 중/3주차 리액트 기초반16

3주차 - (퀴즈) 버킷리스트 데이터를 삭제 해보자 퀴즈설명 - 상세페이지에서 삭제 버튼을 두고, 항목을 삭제 해보자 👻 힌트: 조건에 맞춰 배열 항목을 필터링 해주는 array의 내장함수 filter를 사용합니다. (filter가 뭔지 모르신다면 검색해서 해보세요!) → url 파라미터가 배열의 index이니, 그것만 빼고 나머지를 새로운 배열에 넣어주면 되겠네요! 액션, 액션 생성 함수, 리듀서에 삭제에 관한 내용을 넣어줘야겠죠? → create를 참고해서 delete를 만들어보세요! Detail.js에 제가 useDispatch() 사용법을 주석 처리 해두었습니다 :) 주석을 참고해보세요! 과정: 1. 액션, 액션 생성 함수, 리듀서에 삭제 관련 내용을 만들어 준다. // bucket.js // Actions // 액션의 타입을 정해주는 곳 cons.. 2021. 11. 19.
3주차 - 리덕스를 사용해서 값을 불러오고 수정 해보자 1. 리덕스 써보기 1) 덕스(ducks) 구조 - 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성합니다. (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성합니다.) - 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성합니다. (버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣는 거예요 -> 모듈이라고 한다.) -> 우리는 덕스 구조로 리덕스 모듈을 만들어볼거예요! (리덕스 모듈 -> 액션 타입, 액션 생성 함수, 리듀서가 모두 들어있는 자바스크립트 파일을 말한다.) https://velog.io/@zayong/%EB%A6%AC%EB%8D%95%EC%8A.. 2021. 11. 18.
3주차 - 리덕스, 리덕스를 통한 리액트 상태관리 리덕스란? : 전역 상태(데이터) 저장소입니다. https://velog.io/@gunu/%EC%A0%84%EC%97%AD%EC%83%81%ED%83%9C%EA%B4%80%EB%A6%AC 전역상태관리 전역상태관리란 말하는바 그대로 전역에서 상태를 관리한다는 의미입니다.리액트에서는 상위에서 하위로 상태값을 전달하여 상태를 관리하게 되어있습니다.그러나 위와 같이 컴포넌트가 분리 velog.io 1) 상태관리가 왜 필요할까? [복습하자!] 저희가 만들었던 버킷리스트를 되짚어봅시다! 지금은 App.js에서 리스트 항목 배열을 넣어두고, props로 넘겨주고 있습니다. 그리고 추가하기 버튼도 App.js에 있고요. 만약에, 우리가 이 추가하기 버튼과 텍스트 영역을 AddListItem 컴포넌트를 만들어 분리하고 .. 2021. 11. 18.
3주차 개인 과제 개인 과제 요구사항 11월 16일 리액트 기초 강의(3-6)까지를 기반으로 개인 과제를 시작했습니다. 1) 메인 페이지와 평점 남기기 페이지의 기본 view 설정 -> Route 쓸 때 주의 할 점 : Route를 사용해서 path나 component를 설정 할 때는 App.js에서 설정 해주고 다른 컴포넌트에서 다른 path로 이동 해야 할 때는 useHistory에 history.path를 써서 이동해야 한다. 2) 세모를 누르면 평점 남기기 페이지로 이동하는 기능 3) 평점 남기기 페이지에 요일 받아오기 -> useHistory를 사용해서 경로를 이동 시켜 주었고, 각 요일을 가지고 이동해야 하기 때문에 pathname과 state를 사용 해줬습니다. (history.push 할 때 값을 넘겨주는 .. 2021. 11. 16.
3주차 - 라우팅(페이지->페이지로 이동) 1) SPA란? : Single Page Application이라고 한다. 말 그대로 서버에서 주는 html이 1개 뿐인 어플리케이션이에요. 전통적인 웹사이트는 페이지를 이동할 때마다 서버에서 html, css, js(=정적자원들)을 내려준다면, SPA는 딱 한번만(처음 로딩 할 때) 정적자원을 받아옵니다. - 왜 굳이 html을 하나만 줄까? → 많은 이유가 있지만, 그 중 제일 중요한 건 사용성 때문입니다. 페이지를 이동할 때마다 서버에서 주는 html로 화면을 바꾸다보면 상태 유지가 어렵고, 바뀌지 않은 부분까지 새로 불러오니까 비효율적이거든요. (예를 들어서 사용자가 회원가입 하다가 적었던 내용이 날아갈 수도 있고, 블로그 같은 경우, 페이지마다 새로 html을 받아오면 바뀐 건 글 뿐인데 헤더와.. 2021. 11. 16.
3주차 - Event Listener 1) 이벤트 리스너(Event Listener)이란? : 이벤트 리스너는 사용자가 어떤 행동(=이벤트)을 하는 지 아닌 지 지켜보다가 알려주는 것입니다. 대표적으로는 마우스 클릭, 터치, 마우스 오버, 키보드 누름 등이 자주 쓰여요! (더 많은 내용은 아래 사이트 참고) https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 | MDN DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가 developer.mozilla.org 이벤트 리스너는 에서처럼 엘리먼트에 직접 넣어줄 수도 있지만, 이번 강의에서는 addEventLi.. 2021. 11. 16.
2주차 - 숙제 -> App.js import React from "react"; import logo from './logo.svg'; import './App.css'; import Start from "./Start"; function App() { const [name, setName] = React.useState("르탄이"); return ( ); } export default App; -> start.js import React from "react"; import img from "./scc_img01.png"; const Start = (props) => { console.log(props); return ( 나는 {props.name}에 대해 얼마나 알고 있을까? 시작하기 ); }; export def.. 2021. 11. 15.
2주차 - State 관리 1) 단방향 데이터 흐름이란? : 데이터는 위에서 아래로, 부모에서 자식으로 넘겨줘야 한다는 소리입니다. + 왜 단방향을 써야 하나요?? : 라이프 사이클과 함께 생각해보기 부모 컴포넌트의 state가 업데이트 되면 자식 컴포넌트도 리렌더링이 일어납니다. 만약 자식 컴포넌트의 state가 바뀐 걸 부모 컴포넌트가 props로 받는다고 생각해봅시다. 그러면 자식 컴포넌트가 업데이트 될 때 부모 컴포넌트도 업데이트 되겠죠? 앗..., 그럼 또 자식 컴포넌트가 리렌더링 될 거구요. 무한반복 렌더링이 일어나게 됩니다.!! 2) 클래스형 컴포넌트에서 state 관리 - setState() : 라이프 사이클을 볼 때 잠깐 봤던 setState()! 클래스형 컴포넌트의 state를 업데이트할 때 사용하는 함수입니다... 2021. 11. 15.
2주차 - Ref(리액트에서 돔요소를 가져오는 방법) Ref 만약에, 내가 어떤 인풋박스(input)에서 텍스트를 가져오고 싶으면 어떻게 접근해야할까요? DOM에서 다루는 방법은 1주차에 배웠는데, 리액트에선 어떻게 하면 좋을까요? (render()가 끝나고 가져오면 될까요? 아니면 mount가 끝나고? 아니, 그 전에 가상돔에서 가져오나? 아니면 DOM에서? 😖) → 답은, 리액트 요소에서 가져온다! 1) React 요소를 가지고 오는 방법 1 -> React.createRef() React.useRef() { const my_lists = list; const my_wrap = React.useRef(null); // null로 초깃값을 설정 해줌 console.log(my_wrap); // 콘솔로 확인해봐요! window.setTimeout(() =>.. 2021. 11. 15.
728x90

티스토리툴바