React_lecture.txt

element : 어떤 물체를 구성하는 성분 / the smallest building blocks

DOM Elements != React Elements

React element = dom element 의 가상 표현

React elements 는 immutable (불변성)
 == elements 생성 후에는 children이나 attributes를 바꿀 수 없다 !

Element Rendering

Reacto component input : props, output : react element

Props : React Component의 property  (속성) //붕어빵 쟤료
 - 읽을 수만 있음 (변경 불가)	//붕어빵 굽고나서 속쟤료 변경 불가
 -> 새로운 값을 컴포넌트에 전달해 변경해야함


JSX사용

function App(props){
	return (
		<Profile
			name = "피글"
			introduction = "안녕하세요"
			viewCount = {500}
		/>
	);
}

JSX사용x
React.createElement(
	Profile,
	{
		name : "피글",
		introduction : "안녕하세요",
		viewCount : 500
	},
	null
);

------------
Component - Function/Class Component

*Function Component
function Welcome(props){
	return <h1>안녕, {props.name}</h1>;
)

*Class Component
class Welcome extends React.Component{
	render() {
		return <h1>안녕, {this.props.name}</h1>;
	}
}

!!! Component 이름은 항상 대문자로 시작해야함 !!!
const element = <Welcome name ="인제" />;

재사용 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라진다

---------------------

Hook
function component는 lifecycle에 따른 기능 구현이 불가하기때문에 hook을 사용
->원하는 시점에 원하는 함수를 실행시킬 수 있음

useState()
const [변수명, set함수명] = useState(초기값);


useEffect() : side effect를 위한 함수
useEffect( 이펙트 함수, 의존성 배열);
- 의존성 배열 중 하나라도 변경될 시 이펙트 함수가 실행됨.
- mount, unmount시 단 한번만 사용할려면 의존성 배열에 [] 넣기
- 컴포넌트가 업데이트마다 호출하려면 의존성 배열 빼고 쓰기
- useEffect()의 return 문 -> component unMount될 때 호출됨!


useMemo()
Memoized value :
const memoizedValue = useMemo(
	() => {  return computeExpensiveValue(의존성 변수1, 의존성 변수2); },
	[의존성 변수1, 의존성 변수2] );

-rendering이 일어날 동안 실행되는 함수임


useCallback()
const memoizedCallback = useCallback(
	() => { doSomething(의존성 변수1, 의존성 변수2); },
	[의존성 변수1, 의존성 변수2] );

useCallback (함수, 의존성배열) ; == useMemo( ()=>함수, 의존성 배열);


useRef()
Reference를 사용하기 위한 hook
reference? 특정 컴포넌트에 접근할 수 있는 객체
const refContainer = useRef(초깃값);
변경가능한 current라는 속성을 가진 하나의 상자


Hook의 규칙
1. hook은 무조건 최상위 레벨에서만 호출해야 한다. (반복문, 조건문 내에서 금지)
  -컴포넌트가 렌더링될 때마다 매번 같은 순서로 호출되어야한다. 
2. 리액트 함수 컴포넌트에서만 호출해야 한다.


Custom Hook의 이름은 꼭 use로 시작해야함 !


--------------------------------------------------------------------------------

8강

Event (이벤트) : '특정 사건' ( ex)버튼 클릭 이벤트 ) 
DOM -< onclick = "activate()"
React -> onClick = {activate}

camelCase (카멜 표기법) 사용하기

event Handler : 어떤 사건이 발생하면 처리하는 역할

bind를 사용하기 !
javascript에서는 기본적으로 class 함수들이 bound 되지 않기 때문.
그래서 bind를 하지 않으면 this.handleClick은 gloabl scope에서 호출되어버리는데
이 때 undefined이기 때문에 사용할 수 없게됨

event handler 사용하기
1. 함수 안에 함수로 정의
2. arrow function을 사용하여 정의

argument : event handler 에 전달할 데이터

bind
onClick={this.deleteItem.bind(this,id)}
arrow function
onClick={(event) => this.deleteItem(id, event)}



---------------------------------------------------------------------------------
9강
Conditional Rendering
조건에 따른 렌더링 (조건부렌더링)  (ex/ true이면 버튼 보이고 false이면 버튼 없어짐)

Truthy : true는 아니지만 true로 여겨지는 값
	{},[],42,"0","false"
Falsy : false는 아니지만 false로 여겨지는 값
	0,-0,0n,'',"",``,null,undefined,NaN

if 대신 && 쓰는 방법 多

if-else 대신 ? 

null을 넣으면 rendering 되지 않음.

-------------------------------------------------------------------------
10강
List & Key
Key : 각 객체나 아이템을 구분할 수 있는 고유한 값 / 아이템들을 구분하기 위한 고유한 문자열

map() (mapping) 
배열에 들어있는 각 변수에 어떤 처리를 한 뒤 return 하는 것.

const doubled = numbders.map((number) => number * 2 );
ReactDOM.render(
	<ul>{doubled}>/ul>,
	document.getElemntById('root')
);

List의 Key
속한 집합 내에서만 고유한 key를 가지면 됨. map함수 안에 있는 list는 key 값을 꼭 가져야함.
<li key = {todo.id}> {todo.text} </li>

----------------------------------------------------------------------------
11강

Form 
-사용자로부터 입력을 받기 위해 사용

HTML Form		 	vs	Controlled Component
자체적으로 state를 관리		모든 데이터를 state에서 관리
<input> state			state = {}
<textarea> state			setState()
...

hook사용
사용자의 입력을 직접적으로 제어할 수 있다 !
예) 입력값을 모두 대문자로 바꿔서 저장 가능

TextArea
-여러 줄에 걸쳐 긴 텍스트를 입력받기 위한 HTML 태그
-value라는 attribute를 사용해 텍스트 저장

Select
-Drop-dwon목록을 보여주기 위한 HTML 태그
-useState('grape') -> value({value}
-다중 선택 -> mulitple={true}

File input
-디바이스의 저장장치로부터 하나 또는 여러 개의 파일을 선택할 수 있게 하는 HTML 태그
-uncontrolled component
multiple inputs?
 ->여러개의 state를 선언.

---------------------------------------------------------------
12강

Shared State : 공유된 state
-하나의 데이터를 여러개의 componet에 표현.
-staet에 있는 데이터를  여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우



---------------------------------------------------------------
13강
composition :
여러개의 컴포넌트를 합쳐서 새로운 컴포넌트로 만드는 것

Composition 사용기법
1. Containment : 하위 컴포넌트를 포함하는 형태의 합성 방법
	- children prop 사용 
2. Specialization : 범용적인 개념을 구별이 되게 구체화 하는 것
	- 합성 사용


Inheritance : 
다른 컴포넌트로부터 상속을 받아서 새로운 컴포넌트를 만드는 것
 

---------------------------------------------------------------
14강
Context
기존 방식 : 컴포넌트의 props를 통한 데이터 전달 -> 너무 많아지면 지저분해짐
context 사용 : 데이터를 필요로 하는 component에 곧바로 데이터 전달

언제 사용 ? 여러개의 컴포넌트들이 접근해야 할 때 ( 로그인 여부, 로그인 정보, UI 테마, 현재 언어 등등.. )

필요한 컴포넌트를 변수에 저장하며 직접 넘겨주기
const userLink = (
	...
		<Avatar user = {user} size = {props.avatarSize} />
	...	
);
return <PageLayout userLink = {userLink}/>;

userLink 넘겨주기. 

Context API
React.createContext(기본값);
<MyContext.Provider value = { } >
provider 컴포넌트가 재렌더링될 때마다 모든 하위 consumer 컴포넌트가 재렌더링 됨. 
-> 불필요한 재렌더링  => state를 사용하여 불필요한 재 렌더링을 막아야함

Class.contextType
Context.Consumer
function as a child
Context.displayName
useContext() hook 사용하기

---------------------------------------------------------------
15강
Styling