시작, 다짐

리액트는 워낙 공식문서가 잘 되었다는 말을 많이들어서, 공부를 제대로 심도깊게 한다면 공식문서를 파해쳐봐야한다! 라는 이야기를 들었다.
요즘 프로젝트를 하면서, 점점 더 기초에대한 부족함을 많이 느껴 기초를 쌓고자 시작한 스터디이다!
3주간 공식문서를 다 끝장내기가 목표이다! 하루에 단 한챕터라도..! 미루지않는 습관을 기르자

심리스 : 심심한 리액트 스터디

심심하게 리액트를 뽀개보자......!

JSX

const element = <h1>Hello, world!</h1>;

• JavaScript를 확장한 문법 (JavaScript의 모든 기능이 포함)
• JSX는 React “엘리먼트(element)” 를 생성한다.
• JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다.
• 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해준다.
• camelCase 프로퍼티 명명 규칙을 사용한다.

엘리먼트 렌더링

엘리먼트 : React 앱의 가장 작은 단위이다.

엘리먼트는 화면에 표시할 내용을 기술한다.

브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다.

🙋🏻‍♀️ 브라우저 DOM ?

• 텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다.
• 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는데 이를 DOM이라 한다.
• 즉 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이 DOM이다.
• 이 DOM은 자바스크립트를 통해 동적으로 변경할 수 있으며 변경된 DOM은 렌더링에 반영된다.

🙋🏻‍♀️ 일반 객체 ?

• Plain Object: 순수한 대상 ("{}" 또는 "new Object" 를 통 해 생 성 됨)
• 객체 리터럴{}을 이용해서 만들 수 있다.
• var 변수명={key:value, key2:value2, key3:value3, ...}형식으로 작성한다.
• 순서가 중요치 않은 데이터를 다룬다.
• 객체의 value에는 function 데이터 타입도 들어갈수 있다.

DOM에 엘리먼트 렌더링하기

React 엘리먼트를 루트 DOM 노드에 렌더링하려면 둘 다 ReactDOM.render()로 전달하기

변경된 부분만 업데이트하기

React DOM은 해당 엘리먼트와 그 자식 엘리먼트를 이전의 엘리먼트와 비교하고 DOM을 원하는 상태로 만드는데 필요한 경우에만 DOM을 업데이트한다.

Components와 Props

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

함수 컴포넌트와 클래스 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

<Welcome name="Sara" /> 엘리먼트로 ReactDOM.render()를 호출한다.
2. React는 {name: 'Sara'}를 props로 하여 Welcome 컴포넌트를 호출한다.
3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Sara</h1> 엘리먼트를 반환한다.
4. React DOM은 <h1>Hello, Sara</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트한다.

컴포넌트 추출

왜 추출 ??

• 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 편리함!
• UI 일부가 여러 번 사용되는 경우 (Button, Panel, Avatar)
• UI 일부가 자체적으로 복잡한 경우 (App, FeedStory, Comment)

Props

• props의 이름은 사용될 context가 아닌 컴포넌트 자체의 관점에서 짓는 것을 권장한다.
• props는 읽기 전용이다.

React는 매우 유연하지만 한 가지 엄격한 규칙이 있다.

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

순수함수 ?

입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환한다.

function sum(a, b) {
  return a + b;
}

비순수함수 ?

자신의 입력값을 변경!

function withdraw(account, amount) {
  account.total -= amount;
}

이번주 목표

1. Hello World (월)
2. JSX 소개 (월)
3. 엘리먼트 렌더링 (월)
4. Component와 Props (금)
5. State와 생명주기 발표
6. 이벤트 처리하기 발표
7. 조건부 렌더링 발표
8. 리스트와 Key 발표
9. 폼 (금)
10. State 끌어올리기 (금)
11. 합성 vs 상속 (금)
12. React로 생각하기 (금)

reference
[sally의 프로그래밍 공부:티스토리]