코딩연습장

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)방식으로 렌더링한다. 새로운 페이지를 요청할 때..

Ref란? ref는 render에서 생성된 DOM이나 React element에 접근하는 방법을 제공해준다. 일반적으로 부모 컴포넌트가 자식 컴포넌트와 상호작용 가능한 것은 props가 유일하다. 자식 컴포넌트를 수정하려면 새로운 props를 전달하여 자식을 렌더링 해야하는데, 가끔 직접적으로 자식을 수정해야하는 경우도 발생한다. 이때 DOM element에 접근하기 위해 Ref를 사용한다. HTML을 작성할 때 div같은 태그에 id를 달아 특정 id에 해당하는 DOM요소에만 스타일을 적용하거나, 해당 DOM요소에 접근해 여러 작업을 할 수있다. 하지만 컴포넌트를 재사용한다면 그 id가 중복 될 수 있어, 컴포넌트 내부에서만 작동하는 Ref를 사용해야한다. Ref를 사용해야 할 때는 다음과 같다. fo..

event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요? 함수형 컴포넌트에서 이벤트리스너를 해제하려면 useEffect 훅을 사용해야 한다. dependency를 선언하여 시점을 구분해준다. useEffect(() => { // }, [dependency선언위치]) dependency를 선언하지 않고 빈배열을 넣으면 최초 로드시 렌더링이 된다. 그래서 최초 로드시 addEventListener을 사용해 이벤트를 ..

양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.) 먼저 데이터 바인딩이란 무엇일까? 화면상에 보여지는 데이터와 브라우저 메모리에 있는 데이터를 묶어 서로간의 데이터를 동기화하는 것을 의미한다. HTML에서 서버 혹은 스크립트 상에서 받아온 데이터를 화면상에 그려주고 있을 때 해당 값이 변경되면 HTML상의 데이터를 변경된 값에 맞춰 주는 동작을 데이터 바인딩이라 한다. 데이터 바인딩 예제 아래 예제는 works로 초기화된 값을 HTML에 출력하고, 추가하기 버튼을 누르면 State를 변경하여 HTML에서 데이터 바인딩을 하는 예시이다. import React, { useState }..

오늘 리액트 입문주차 개인과제를 vercel을 이용하여 배포하고, README도 작성해보았다. 그리고 몇가지 코드를 수정한 것이 있어 이걸 작성해보고자 한다. //Work 추가하기 버튼핸들러 const addWorkHandler = () => { const newWork = { id: works.length+1, title: title, desc: desc, isDone: false, }; setWorks([...works, newWork]); //인풋태그value 제거하기위함 setTitle(''); setDesc(''); }; State에 값을 추가하는 버튼에대한 핸들러함수이다. 여기서 id값을 works.length+1로 주는데, 스터디팀원분인 이재정님께서 문제점을 제기해주셨다. 우리는 삭제버튼도 ..