코딩연습장

어떤 컴포넌트에서 State를 생성하고 다른 컴포넌트로 보낼때 우리는 props를 통해 부모 -> 자식으로 보내줍니다. 위 사진과같이 단지 옮겨주고 싶을 뿐인데 그 사이 컴포넌트를 거쳐 옮겨야하는 불편함이 있습니다. 또한 반드시 부 -> 자 순으로만 props를 옮길 수 있었습니다. 그런 불편함을 겪지 않기위해 redux와 같은 전역상태관리 프로그램을 사용합니다. 리덕스를 사용하면 State를 공유하고자할 때 부-자 관계가 아니어도 되고, 중간에 의미없는 이동도 필요 없습니다. Global State(전역상태)와 Local State(지역상태) 지역상태란? : 컴포넌트에서 useState를 사용해 생성한 State이다. 전역상태란? : Global State는 컴포넌트에서 생성되지 않고, 중앙화된 특별한..

StrictMode는 개발환경에서만 활성화되고, 프로덕션빌드에는 영향을 끼치지않는다. application내 어디에서든 strict모드를 활성화할 수 있다. import React from 'react'; function ExampleApplication() { return ( ); } 위 코드에서 Header과 Footer은 Strict모드 검사가 이루어지지않고 ComponentOne, ComponentTwo만 받고, 그 둘의 자손까지 모두 검사가 이루어진다. StrictMode는 아래와 같은 부분에서 도움이 된다 안전하지 않은 생명주기를 사용하는 컴포넌트 발견 레거시 문자열 ref 사용에 대한 경고 권장되지 않는 findDOMNode 사용에 대한 경고 예상치 못한 부작용 검사 레거시 context A..

useEffect는 리액트 컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook이다. 어떤 컴포넌트가 화면에 보여졌을 때 내가 무언가를 실행하고 싶다면? 또는 어떤 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다면? useEffect를 사용한다. import React, { useEffect } from "react"; 리액트 내장기능이어서 따로 설치하지않고 import만 상단에 작성하면 된다. // src/App.js import React, { useEffect } from "react"; const App = () => { useEffect(() => { // 이 부분이 실행된다. console.log("hello useEffect"); }); return Home; }..

불변성을 지켜야하도록 만들어진 이유 1. 불변성을 지켜주면 이전 할당되었던 메모리 값이 그대로 있기 때문에 특정 행동을 취소하고 재실행하는걸 단순하게 구현할 수 있기 때문에 2. 참조하고 있는 객체의 주소가 변경된 것을 감지하는 것이 변화를 감지하는데 가장 확실한 방법이기 때문에 3. 순수 컴포넌트는 입력된 값을 받아 그대로 출력한다. 이경우 데이터값은 변경되지 않았지만 새로운 객체가 생성되기 때문에 리렌더링을 하는 시기를 결정할 수 있다. 4. 원본데이터가 변경될 경우 이 원본을 참조하는 다른 객체에서 오류가 발생할 수 있기 때문에 5. 객체의 참조 주소값의 변경유무만 확인하여 계산 리소스를 줄여 효율적으로 상태를 업데이트 할 수 있기 때문에 useState의 방식이 두가지인 이유 즉 batching이..

const [state, setState] = useState(initialState); useState라는 함수가 배열을 반환하고, 이것을 구조분해문법으로 꺼내놓은 모습. state를 변수로, setState로 state를 수정할수 있음. state가 원시데이터타입이 아닌 객체 데이터타입일 시 불변성을 유지해주어야함. 기존에 우리는 setState를 사용해서 값을 변경했다. setState(num +1) 하지만 이 안에 함수형으로 집어 넣을 수도 있다. setState((currentNum)=> {return currentNum +1) }; 뭐가다른데? 먼저 말하자면 일반업데이트방식은 batch로 처리되고, 함수형 업데이트 방식은 순차적으로 처리된다. // src/App.js import { useSt..

styled-components의 GlobalStyles 이란 무엇이고, 어떻게 사용해야 할까? 1강에서 사용한 styled컴포넌트는 특정 컴포넌트에서 사용하는 스타일에만 적용하는 방식이었다. // BlogPost.js import styled from "styled-components"; function BlogPost({ title, children }) { return ( {title} {children} ); } const Title = styled.h2` font-family: "Helvetica", "Arial", sans-serif; line-height: 1.5; font-size: 1.5rem; margin: 0; margin-bottom: 8px; `; const Content = st..

여태까지 css를 넣기위해 css-in-JS방식을 사용했다. css-in-JS란 자바스크립트 코드로 CSS코드를 작성하여 컴포넌트를 꾸미는 방식이다. 컴포넌트를 만들고 컴포넌트를 꾸미기위해 css파일을 만들고 import하고... tag마다 className을 넣어 CSS코드를 반복 작성해야하는 불편함이 있었다. 이번에는 styled-component 패키지를 사용하여 CSS-in0JS방식으로 컴포넌트를 꾸밀수 있게 할 것이다. VScode 플러그인, 패키지 설치 yarn add styled-components styled-components 사용하기 // src/App.js import React from "react"; // styled-components에서 styled 라는 키워드를 import ..

[1,2,3]이라는 배열이 RAM에 저장되고, arr이라는 변수는 그 공간을 통하는 길을 담는다. 따라서 얕은 복사를 하게되면 통하는 길이 같기 때문에, 배열, 객체의 요소를 우리가 바꿨다고 생각하더라도, 그 길은 변하지 않아서 컴퓨터는 State값이 변하지 않았다고 판단하여 리렌더링하지 않는다. {works .map((work) => { if(work.isDone === false) { return ( ); } else { return null } })} 이 코드에서 오류가 발생했을 때, 아마 isDone을 변경하는 함수인 changeWorkHandler에서 얕은 복사를 하고 isDone을 변경하는 형식으로 작성했던 것 같다. 정확히 어느부분에서 State의 변경을 인식하지 못한 것인지는 모르겠지만, ..

오늘은 팀과제를 마무리했다. 양방향 데이터 바인딩에 관하여 이해가 안가서 슬랙에 질문해보았고, 아직 Vue.js에 대해 알지 못하기 때문인 것 같아, 개념정도만 이해하고 넘겼다. 스터디 팀원분의 코드를 보고 새로 알게 된 것에 대해 정리하고, 기술매니저님의 코드리뷰에대해 써보려고 한다. function Child({ a, b, c}) => { } function Child(props) => { const { a, b, c} = props } 위는 자식 컴포넌트의 매개변수에서 props를 구조분해할당한 것이고, 아래는 const를 이용하여 따로 구조분해할당을 한 것이다. 저런 방식으로하니 더 깔끔해 보여서 남기려고 했다. 기술매니저님의 코드리뷰 //Work 추가하기 버튼핸들러 const addWorkHan..

SPA 방식과 MPA 방식은 무엇인가요? SPA(Single Page Application) MPA(Multiple Page Application) 모든 정적 리소스를 최초 한번에 다운로드 --> 새로운 페이지 요청이 있을 때 필요 데이터만 받아 갱신 새로운 페이지를 요청할 때마다 정적 리소스 다운로드 --> 매번 전체 페이지가 리렌더링됨 CSR(Client Side Rendering)방식 (SPA라고 무조건 CSR은 X) SSR(Server Side Rendering) MPA ( Multiple Page Application) 여러개(Multiple)의 Page로 구성된 Application이다. MPA는 SSR(Server Side Application)방식으로 렌더링한다. 새로운 페이지를 요청할 때..