Frontend

모듈 만들기 (1) 우리가 리덕스로 만들 첫 프로그램은? 우리가 리덕스로 처음 만들어 볼 것은 예전에 만들었던 카운터 프로그램 입니다. useState 로 만들었던 것을 리덕스로 다시 만들어봅시다. (2) 첫 모듈 만들기 모듈이란, State의 그룹이라고 했습니다. 우리의 첫 모듈은 카운터 프로그램에 필요한 State들이 모여있는 모듈이 될 것 입니다. 아래 순서대로 파일을 생성하고 코드를 입력해볼까요? modules 폴더에 counter.js 파일을 생성한다. 코드를 작성한다. src/modules/counter.js { switch (action.type) { default: return state; } }; // 모듈파일에서는 리듀서를 export default 한다. export default c..

리덕스 세팅 (1) 리덕스 설치 리액트에서 리덕스를 사용하기 위해서는 2개의 패키지를 설치해야 합니다. vscode 터미널에서 아래 명령어를 입력해서 2개의 패키지를 설치하세요. 참고로 react-redux 라는 패키지는 리덕스를 리액트에서 사용할 수 있도록 서로 연결시켜주는 패키지 입니다. yarn add redux react-redux 위의 한줄은 아래 두줄을 동시에 한것과 같은 의미 yarn add redux yarn add react-redux (2) 폴더 구조 생성하기 좌측의 이미지와 같이 폴더 구조를 생성하세요. src 폴더 안에 redux 폴더를 생성 redux 폴더 안에 config, modules 폴더를 생성 config 폴더 안에 configStore.js파일을 생성합니다. 각각의 폴더..

Redux를 사용하지 않을때의 불편함 어떤 컴포넌트에서 생성한 state를 다른 컴포넌트로 보고자 할 때 우리는 어떻게 했었나요? Props를 통해서 부모 컴포넌트에서 자식 컴포넌트로 그 값을 보내주었습니다. 근데 Props로 State를 공유하는 방법에는 불편한 점이 있습니다. 컴포넌트에서 컴포넌트로 State를 보내기위해서는 반드시 부-모 관계가 되어야 한다. 조부모 컴포넌트에서 손자 컴포넌트로 값을 보내고자 할때도 반드시 부모 컴포넌트를 거쳐야만 한다. 즉, 정작 부모컴포넌트에서는 그 값이 필요가 없어도 단순히 손자 컴포넌트에게 전달하기 위해 불필요하게 거쳐야만 하는 것을 의미한다. (조부모 → 부모 → 손자) 자식 컴포넌트에서 부모 컴포넌트로 값을 보낼 수 없다. 어쩌면 이미 여러분은 위 불편함을..

map ToDoList.jsx import React, { useState } from "react"; export default function ToDoList() { const [todos, setTodos] = useState([ { id: "123", text: "장보기", status: "active" }, { id: "124", text: "공부하기", status: "active" }, ]); return; {todos.map((item) => ( {item.text} ))} ; } 1. initialState는 말 그대로 초기값일 뿐이고 state는 useState의 state에 저장된다. 그러므로 데이터를 참고할때는 useState의 state를 참고하자. {todos.map((item)..

구조분해할당 useReducer의 개념 상태를 관리하게 될 때 useState 를 사용하는것 말고도 다른 방법이 있다. 바로 useReducer 라는 Hook을 사용하는것인데, 이 Hook 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. 즉, 다른 컴포넌트에서도 재사용을 하기위해 로직을 따로 정의할 수 있어, 유지보수에 유리하고 간결한 코드를 내보일 수 있다는 장점이 있다. useReducer의 사용방법 const [state, dispatch] = useReducer(reducer, initialState); useReducer 에 넣는 첫번째 파라미터는..

자바스크립트를 공부할때 배열편에서 배열을 관리하는 다양한 함수에 대해 배웠다. 그중 강사님이 두 가지의 관점으로 정리하면 좋다고 하셨는데 배열을 수정하는 방식과, 새로운 배열을 생성하는 함수였다. 그때는 똑같이 배열을 관리하는 함수인데 왜 꼭 새로운 배열을 생성하는가 아닌가에 대한 기준으로 접근해야하는지 이해를 못했었는데 오늘 문득 React개념복습중 re-rendering을 보다가 이해가 가게되었다. React는 4가지정도의 리렌더링기준이 있는데 그중 불변성의 개념과 더불어 새로운 배열과 객체를 내뱉어주는 함수를 사용해야만 state의 변화를 감지할 수 있기때문에 강사님이 미리 관점을 분리해 강의해주신 것이었다. 불변성 (1) 불변성이란? 불변성이란 메모리에 있는 값을 변경할 수 없는 것을 말한다. 자..

State State란 무엇인가? 💡 State란 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다. 우리가 앞에서 name이라는 정보를 const name = “홍부인”; 이라고 만들었는데, 만약 name이라는 값이 바뀌어야만 하는 정보였어야 했다면 state로 생성합니다. State 만들기 State를 만들 때는 useState()를 사용한다. 그때, state가 변했는지 변하지 않았는지 확인하는 방법이 state의 변화 전, 후의 **메모리 주소를 비교합니다.** 그래서 만약 리액트에서 원시데이터가 아닌 데이터를 수정할 때 불변성을 지켜주지 않고, 직접 수정을 가하면 값은 바뀌지만 메모리주소는 변함이 없게 되는것이죠. 그래서 즉, 개발자가 값은 바꿨지만 리액트는 state가 변했다고 인지하지 못하게 ..

Props - [Object-Riteral로 전달하기] 예제1) import React from "react"; // div안에서 { } 를 쓰고 props.motherName을 넣어보세요. function Child(props) { return {props.motherName}; } function Mother() { const name = "홍부인"; return ; } function GrandFather() { return ; } function App() { return ; } export default App; [질문] : 혹시 자식 컴포넌트에서는 부모 컴포넌트로 props를 전달 할 수 없나요? [답변] : 네, 자식 컴포넌트에서는 부모 컴포넌트로 props를 전달할 수 없습니다. 오직 부모..