Je개발 일지

하단의 내용을 문서로 먼저 작성 후, 발표용 PDF 를 만들었다. 예시는 React 와 Vue 를 비교하면서, Vue 사용자들이 React 를 처음 사용할 때 당황할 법한 내용들을 담고 있다. 아래의 문서들이 너무 읽기 힘들다면 시각화된 자료로 간단하게 만든 PDF 파일을 보는 것을 권장. 1. React 의 고민 1-1) Angular.js 의 불편함 React 가 등장하기 전, 모던 프레임워크로 Angular.js 가 등장했다. Angular.js 는 작은 컨테이너들을 결합해 애플리케이션을 구축하는 형태다. 하지만, 컨테이너들이 결합하고 동일한 데이터를 사용하는 컨테이너들이 데이터를 조작하면서 “의도치 않은 데이터 변경” 이 이곳저곳에서 생기기 시작했다. 애플리케이션의 구조는 더욱 커져 갔고, 데이터..

state 를 잘 구조화하면 컴포넌트가 수정과 디버깅에 용이해진다. 1. state 구조화 원칙 컴포넌트를 작성할 때는 얼마나 많은 state 변수를 사용할지, 데이터 모양은 어떻게 해야할지를 선택해야 한다. 관련 state 를 그룹화 한다. 항상 두 개 이상의 state 변수를 동시에 업데이트한다면 하나의 state 로 합치는 것이 좋다 state 모순을 피하라 여러 state 조각이 서 모순되거나 불일치할 방식으로 state 를 구성해서는 안 된다. 불필요한 state 를 피하라 렌더링 중에 컴포넌트의 props 나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state 에 넣지 말아야 한다. state 중복을 피하라 동일 데이터가 여러 state 변수 간에 또..

1. 선언형 UI 와 명령형 UI 의 차이점 React 는 직접 UI 를 조작하지 않는다. 이는 컴포넌트를 직접 활성화하거나 비활성화하지도 않고, 보여주거나 숨기지도 않는다. 대신 표시할 내용을 선언하면 React 가 UI 를 업데이트할 방법을 알아낸다. 2. UI 를 선언적인 방식으로 생각하기 UI 를 React 로 다시 구현하는 과정을 보면 다음과 같다. 컴포넌트의 다양한 시각적 상태를 식별한다 상태 변화를 촉발하는 요소를 파악한다 useState 를 사용해 메모리의 상태를 표현한다 비필수적인 state 변수를 제거한다 이벤트 핸들러를 연결해 state 를 설정한 Step 1 : 컴포넌트의 다양한 시각적 상태 식별하기 먼저, 사용자에게 표시될 수 있는 UI 의 다양한 상태를 모두 시각화 해야 한다. ..

state 를 잘 구조화하는 방법, state 업데이트 로직을 유지 관리하는 방법, 멀리 떨어진 컴포넌트 간에 state 를 공유하는 방법에 대해서 알아볼 것 1. state 로 입력에 반응하기 React 를 사용하면 코드에서 UI 를 직접 수정하지 않는다. 대신 컴포넌트의 다양한 시각적 state 별로 표시하려는 UI 를 구현하고, 사용자 입력에 대한 응답으로 state 변경을 촉발한다. 2. state 구조 선택 state 를 잘 구조화하면 수정과 디버깅이 편한 컴포넌트와 버그가 끊임없이 발생하는 컴포넌트의 차이를 만들 수 있다. state 에 불필요하거나 중복된 정보를 포함하지 말 것 import { useState } from 'react'; export default function Form()..

1. 변이(Mutation)란 무엇인가 state 는 javaScript 의 어떤 값이든 담을 수 있다 이는 객체도 담을 수 있다는 것. 기술 적으로 객체 자체의 내용을 변경하는 것은 가능하다 const [p, setP] = useState({x: 0, y: 0}) p.x = 5 위 로직은 자바스크립트에서 가능하다. React state의 객체는 기술적으로 위와 같이 변이할 수 있지만, 이는 원시 타입과 같이 불변하는 것처럼 취급해야 한다. 2. state 를 읽기 전용으로 취급할 것 즉, state 에 넣는 모든 값을 read-only 로 취급해야 한다 import { useState } from 'react'; export default function MovingDot() { const [posit..

1. state 를 설정하면 렌더링이 촉발된다 state 를 설정하고 이 값을 업데이트 하면 React 의 리렌더링을 촉발한다. 즉, 인터페이스가 이벤트에 반응하려면 state 를 업데이트 해야 한 import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return Your message is on its way! } return ( { e.preventDefault(); setIsSent(true); sendMessage(message); }}> set..

저번 시간에 이어서 남은 과제를 수행하겠다. 1), 4), 6)은 했고 이제 input창 관리인 2), 3), 5) 남았다 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder ..

오늘 할 것을 설명하자면 옆의 사진들과 같다. CSS 는 편의상 margin 값만 추가했다. 왼쪽 스크린샷은 최초 렌더링됐을 때의 화면이다. 1) 저 인물 리스트들을 객체를 요소로 하는 배열로 받은 후, 하드 코딩이 아니라 이 배열을 이용해서 여러 리스트가 나오도록 출력할 것이다 2) input 창도 두 개로 관리할 예정이다. 3) 왼쪽에 있는 스크린샷처럼 input에서 이름과 전공을 사용자로부터 입력을 받은 후 등록 버튼을 누르면 상단의 리스트에 이름과 전공이 추가되는 화면을 넣을 것이다. (현재 화면에선 '추민하'가 추가됨) 4) 인물 부분은 태그로 감싸서 Bold 처리를 하고, 전공은 소괄호로 묶어서 표현한다. 5) input 창은 보이는 것처럼 placeholder 처리를 해줄 것이다. 6) 마지..