[개발 공부 20일차] React 입문 청강 완료! & 챌린지 반 과제 완료

 

 
 
휴... 바로 드가자
 

< 목차 >

1. [React  기초] 완강 및 개념 명확히
   1-1) 핵심 요약
   1-2) 질문 및 답변
2. [article] React로 사고하기
3. 금일 소감

 
 

1. [React  기초] 완강 및 개념 명확히

1-1) 핵심 요약

default props

: 부모 컴포넌트에서 props를 보내주지 않아도 설정될 초기값
 
↓ 유사
 

Default Argument

: 매개 변수가 지정되지 않았을 때, 자동으로 지정해줄 값 정해줌

 

hook

: 기능

 

state

: React에서 이벤트에 의해 변경되는 동적인 값
UI 바꾸려고 씀. 즉, 렌더링 다시 하려고
 

 
예문 작성 중에 에러 원인 알려주는 확장 프로그램이 구조분해할당을 구조파괴선언이라고 알려준다 ㅋㅋㅋㅋㅋㅋㅋ 아니 구조 파괴 선언이라니 이 친구야 ㅋㅋㅋㅋㅋㅋ 맞긴 한데 표현이 너무 괴팍하자나

 

▼  예문

function App() {
  const [fruit, setFruit] = useState("");

  return (
    <div>
      과일: <input
        value={fruit}
        onChange={function (event) {
          setFruit("event", event.target.value);
          />
    </div>
  );
}

 

 

불변성

: 메모리에 있는 값을 변경할 수 없는 것
(1) 원시 데이터: 숫자, 문자, 불리언 ⇒ 불변성 O
(2) 원시 데이터 아닌 것들: 배열, 객체, 함수  ⇒ 불변성 X
 
불변성 O: 값이 같으면 똑같은 데 바라보고, 다르면 따로 생성해서 다른 데 바라봄
불변성 X: 애초부터 다른 데를 바라봄 (값이 똑같아도)
 
 

Rendering

: 웹 사이트 코드를 사용자가 웹 사이트를 방문할 때, 보게 되는 대화형 페이지로 바꾸는 웹 개발에 사용되는 절차
 

[중요] React는 화면을 렌더링 할지를 state의 변화에 따라 결정! 단순 변수는 무시!

 
 

map 함수

: 원래 데이터를 가공해 출력하는 방법
 
 

 useState 

: 함수형 또는 클래스형 컴포넌트에서 로컬의 데이터 상태를 관리하고, 변경할 수 있도록 도와주는 React Hook
초기 입력될 상태 값을 인자로 받아서 상태 값과 해당 상태를 업데이트하는 함수를 쌍으로 반환하게 된다.  동적 데이터를 다루는 것, 컴포넌트별 고유한 상태 값, 변경 가능성(실시간 or 주기적 렌더링이 필요한 UI), 상태관리를 통한 컴포넌트 내부에 캡슐화를 활용하여 UI 업데이트 등에 사용된다.
 

▼  예문

const [value, setValue] = useState(0);

 
[해석] value는 저장된 값. 즉 useState(0)에서 0의 값을 갖게 된다. setValue의 경우, value 변경된 값을 저장할 수 있게 만들어 줌
 
 

<br> 태그

: 텍스트 줄 바꿔줌 (텍스트 제외한 것들은 <div> 써야 함)
* 웬만하면 사용하지 말 것
 
 

1-2) 질문 및 답변

강의 다 듣고 구글링해도 감이 안 잡히는 기초 개념이 있어 튜터님께 찾아가서 자세히, 그리고 명확히 알려주시기를 요청드렸다.
 

[중요] state와 compornant의 차이, 의미?
state: 자바스크립트적인 요소로 컴포넌트의 상태를 바꿔줌. 컴포넌트의 변경을 감지!
component: React 안에 보이는 모든 것. UI적인 블록!(ex. body, footer, button 등)
* React는 컴포넌트로 구성된 프로그램
* 컴포넌트 안에 state(+ setState) 속함

 
 

import와 export 사용 이유 명확하게 뭔지
: 효율화(재활용)하기 위해서

 
ex) a.js 파일 = 국가 (한, 중, 일...)
export = 수출 (바깥으로 내보냄 / 모든 컴포넌트는 export가 돼야 됨)
import = 사용
 
 
 

2. [article] React로 사고하기

https://ko.react.dev/learn/thinking-in-react
 
챌린지 반 첫 과제로 위 아티클을 읽고 소감과 질문을 작성하는 활동을 했다!
내용을 나 스스로 이해하기 쉬운 표현과 방식으로 압축적으로 정리 및 요약하고 소감, 질문을 작성했다. 업로드한 내용 그대로 가져왔다. 목차와 내용은 다음과 같다.
 

< 목차 >
1. [React로 사고하기] 핵심 요약

   1-1) UI를 컴포넌트 계층으로 쪼개기!

   1-2) React를 정적인 버전으로 구현

   1-3) 최소한의 데이터만 이용해서 완벽하게 UI state 표현

   1-4) state: "어디로 가야 하오"

   1-5) 역데이터 흐름 추가

   1-6) other

2. 소감
3. 질문사항

 
 
 

1. [React로 사고하기] 핵심 요약

React를 사용하면 내가 고려하고 있는 디자인이나 만들 앱들에 대한 생각을 바꿀 수 있다.
 
 

   1-1) UI를 컴포넌트 계층으로 쪼개기!

: 복잡 or 반복되면 별도의 컴포넌트를 만드는 게 효율적 및 합리적. 쪼개서 상위(부모) - 하위(자식) 형태의 계층 구조를 형성해라
 
 

   1-2) React를 정적인 버전으로 구현

[Best] 정적인 버전 생성 → 상호작용 기능 추가
state 사용 X
* 정적인 버전: 컴포넌트 재사용 & props 이용해 데이터 넘겨줌
* state 사용 시기: 상호작용을 위해, 즉 시간이 지남에 따라 데이터 바뀌어야 할 때
 
 

   1-3) 최소한의 데이터만 이용해서 완벽하게 UI state 표현

* state: 변경 가능한 데이터의 '최소' 집합 ('최소'이기 때문에 겹치지 않아야 함)
 
[ state 기준 ]
① '부모 → 자식'처럼 데이터 전달되면 안 됨
② 시간에 따라 변화해야 됨
③ 다른 요소로 계산 불가해야 함
 
 

   1-4) state: "어디로 가야 하오"

: [중요] React의 컴포넌트 계층 구조 = '불효자 자식'으로 이해하면 쉬움 ([why?] 받기만 함)
부모 → 자식으로 일방적 데이터 흐름!
 
① 해당 state를 기반으로 렌더링하는 모든 컴포넌트 찾기
② 가장 가깝고 공통되는 부모 컴포넌트 찾기 (= 최상위 컴포넌트)
③ state: "자! 가자! 근데 어디?"
   3-1) 공통 부모에 두기
   3-2) 공통 부모 상위의 컴포넌트에 두기
   3-3) 적절한 곳 못찾은 경우, state를 소유하는 컴포넌트 하나 새로 생성 → 상위 계층에 추가!
 
 

   1-5) 역데이터 흐름 추가 (어려움) **Quick Start 보기**

 
 

   1-6) other

- component: 시각적 상태의 조각
- props: 함수를 통해 전달되는 인자 (이동하기 때문에 '전자' 느낌)
- state: 컴포넌트의 메모리 (정보 흐를 수 있게 해줌. '혈관' 느낌)
 
 
 

2. 소감

React 입문 강의를 모두 다 듣고 나서 아티클을 읽으니 확실히 더 이해가 잘 되는 느낌이었습니다! 'React의 핵심은 <효율화(재활용성)>이구나!' 싶었습니다. 자바스크립트 챕터 때 엄청 헤매며 깨달은 것은 이 프로그래밍 언어를 어떤 목적에서 사용하는지와 사용 중인 명령어를 왜 사용하는지를 이해하는 게 가장 중요하단 것을 깨달았습니다. 개인 과제를 시작하기 전에 읽었는데, 직접 적용해 보기 전에 생각을 정리하고 React가 이런 체계로 돌아간다는 것을 알게 되어 유익했습니다. 해당 본문의 예제 같은 경우엔 아직 확실하게 이해되지 않아서 '1-5) 역데이터 흐름 추가 (어려움) **Quick Start 보기**'라고 적은 것처럼 주말 중으로 Quick Start 내용도 읽으려고 합니다. 좋은 글 추천해주셔서 너무 감사합니다 :)
 
 
 

3. 질문사항
(1) '정적인 버전'이라는 게 정확히 어떤 의미인가요?
(2) '5. 역데이터 흐름 추가' 부분의 이해가 어렵습니다. 이해하기 쉽게 설명해 주실 수 있으실까요?

 
 

3. 금일 소감

휴 오늘은 위 내용처럼 Reat 입문 완강하고, 챌린지 반 과제 완료하고, 모르는 개념은 튜터님 두 분께 가서 질문하여 답변 들었다. 이제 개인과제 한다!
 
들으면서 확실히 이해가 가지 않은 강의 내용은 따로 옆에 적어놨다. 주말 중으로 다시 들어야 한다. 그리고 개인과제 제출 완료하면 자바스크립트 강의를 2배속으로 하여 전체적으로 한 번 더 들어야겠다. 할 게 너무 많아서 계속 정리하면서 하나씩 해내고 있다. 부지런히 해서 다 해내야지,, 할 일이 많아서 오늘은 이만 줄이겠다! 주말도 파이팅!!!!!!!!!!!!! 빠샤빠샤