개발자.. 너란놈..

※ hooks

- 리액트 16버전에서 새로 나온 개념으로 리액트에서 자주쓰이는 상태관리, 생명주기 관련 내용들을 내장함수처럼 미리 만들어놓은 라이브러리 형태의 기능모음
- 리액트 hook의 등장으로 인해서 기존의 클래스형 컴포넌트 제작방식에서 함수형 컴포넌트 제작 방식으로 리액트의 작업 난이도가 낮아지면서 인기가 올라감

※ hook이 나오게 된 배경

- React16이전 버전에서는 클래스형 작업방식 , 함수형 작업방식

• 클래스형 작업방식 : 여러가지 클래스를 제작해서 서로 상속을 작업을 하다보니 코드의 가독성은 비교적 좋으나 반복코드 작업을 많이 했었어야 됨
• 함수형 작업방식 : hoc(high order component) 함수에 인수로 함수를 전달해서 새로운 함수를 리턴하는 방식, 반복 코드는 적으나 코드 가독성이 많이 떨어짐

- 함수형 작업방식의 문제점인 hoc를 활용하는 기능들을 라이브러리처럼 hook라는 개념으로 미리 만들어서 배포
- 2016년도 이후부터 hook의 등장으로 class형 방식에 비해 함수형 component 방식의 효율성이 증대 

React의 hook 삼대장 (useState , useEffect , useRef)
성능관리를 위한 hook (memo, useMemo , useCallback)
양방향 데이터 바인딩을 위한 hook (forwarRef , useImperativeHandle)

※ State (상태값)

- 리액트에서 컴포넌트의 화면 출력 (rendering)을 담당하는 중요 정보값을 담는 그릇
- 컴포넌트 안에서 State 값이 변경되면 해당 컴포넌트 화면이 자동으로 reRandering 됨 (함수가 재 호출)

※ State 사용법

- 리액트로 부터 useStat라는 state 생성해주는 전용 기능을 import (hook) : hook은 무조건 컴포넌트 함수 내부에서 호출 되어야 함
- useState 함수를 통해서 State와 State를 변경해주는 함수를 비구조화 할당상으로 받음
- 해당 State값을 무조건 State전용 변경함수를 통해서만 변경 가능
- useState는 배열값을 리턴 [인수로 전달한 값을 state 담아서 첫번째 값 , 해당 state를 변경 할 수 있는 전용 함수]
const [IsPop,setIsPop] = useState(false);
- uss 클릭하고 useStateSnippet 선택하면 자동 구문 완성
- State를 onClick에 넣으려면 () => 로 화살표 함수로 넣어야지만 무한루프를 타지 않는다.

- 자식 컴포넌트로 useState를 보내기
부모 - 자식 컴포넌트로 setIsPop State 변경 함수를 prop으로 전달
{IsPop && <Popup setIsPop={setIsPop} />}

자식 - 자기 자신을 닫아주는 State가 자기가 아닌 부모 컴포넌트를 있으므로 부모 컴포넌트로 부터 State 변경 함수를 props로 전달받아 호출
function Popup({ setIsPop }) {
- state에 담기는 정보 값이 원시형이 아닌 배열이나 객체같은 참조형 자료이면 무조건 전개연산자로 복사본을 만들어서 변경 처리 (불변성유지)
- React에서 state에 불변성을 유지하는 이유는 원본과 바뀔 복사본을 비교 대조해서 화면을 ReRandering 하기 때문

※ State에 선언된 배열을 쓰기

- 기존에 선언된 배열의 부분값만 변경하면 변경이 되지 않고, 배열을 copy한 뒤 한번에 바뀌어야지만 변경이 가능함.
EX) const [Colors, setColors] = useState(['red', 'green', 'blue']);

//기존의 colors에 들어가 있는 참조형 자료인 배열 값을 Deep Copy
const newColors = [...Colors];
//원본은 유지한채 복사가된 배열값을 변경
newColors[2] = 'aqua';
//변경된 복사된 배열값을 state 변경 함수로 변경 처리
setColors(newColors);

React에서 onClick 이벤트를 처리하는 방법이다.

Javascript 처럼 데이터를 가져와서 하는 방법도 있지만 아래와 같이 사용 할 수도 있다.

function App() {
	const noArgs = (e) => {
		e.target.innerText = 'noname';
	};

	//인수로 원하는 텍스트를 전달해서 변경 가능 하도록 코드 개선
	const handleClick = (e, txt) => {
		e.target.innerText = txt;
	};

	return (
		<div className='wrap'>
			{/* 첫번째 버튼 클릭 시 클릭한 버튼의 글자값을 '버튼'으로 텍스트 변경 */}
			<button id='button1' onClick={noArgs}>
				button1
			</button>

			{/* 인수를 전달해야되는 함수를 이벤트 연결 할때는 wrapping 함수로 아래처럼 호출 */}
			<button onClick={(e) => handleClick(e, 'Hello')}>button2</button>
		</div>
	);
}

※Sass 사용

import './scss/style.scss';
이런식으로 바로 사용 할 수 있음. (--wacth를 안해도 됨)

import './scss/style.scss';

function App() {

	return (
		<div className='wrap'>
			<h1>TITLE1</h1>
			<h1>TITLE2</h1>
		</div>
	);
}

export default App;

.wrap {
	border: 1px solid red;
}

변수를 사용하여 선언 하거나 Style에 바로 입력

function App() {
	const fontStyle = {
		color: 'aqua',
		fontSize: 60,
		fontWeight: 'normal',
	};

	return (
		<div className='wrap'>
			{/* 미리 스타일 객체를 변수에 선언후 가상돔에 연결 */}
			<h1 style={fontStyle}>TITLE1</h1>
			{/* 가상돔에 직접 객체 리터럴 형식으로 스타일 적용 가능 */}
			<h1 style={{ color: 'orange', fontSize: 30 }}>TITLE2</h1>
		</div>
	);
}

export default App;

JSX 주석 처리

{//중괄호 안쪽에서 주석 처리를 해야됨}

※ JSX 연산 처리

{중괄호 안쪽에서 연산 처리}

import { Header, Footer, Section } from './Common';

const name = '김영희';
const class1 = 'box';

function App() {
	return (
		//일반 스크립트 주석 사용 가능
		<>
			{/* JSX 문법 안쪽에서는 주석을 중괄호 안쪽에서 처리 
				JSX 안쪽에서 연산이 필요한 부분은 중괄호 처리
			*/}
			<Header />
			<Section />
			<Footer />
			<p className={class1}>{name}님 안녕하세요.</p>
		</>
	);
}

- 함수명은 대문자로 시작 
- 해당함수는 JSX를 리턴해야함
- 해당 함수를 export 시켜야 됨. (export default 함수명)
- 하나의 컴포넌트 함수는 복수요소의 JSX를 리턴할 수 없음
- 복수개의 JSX를 리턴시에는 괄호로 감싸줌, 단수개 JSX 리턴시에는 괄호 생략 가능
- 복수개의 요소를 리턴하고 싶을때는 무조건 wrapping 태그로 감싸줘야 됨
★★- 중첩되는 태그없이 복수요소의 JSX를 리턴하고 싶으면 fragment활용 <></>
=> 이걸로 감싸면 부모쪽에서는 div로 감싸져서 나오지 않음.
★★- 클래스명을 입력할 시에는 class가 아닌 className으로 표기 해야됨 (class 객체지향시 활용하는 예약어이기 때문에 사용 불가)
- 화살표 함수 형태로도 제작 가능 const App = () => {}
- 화살표 함수 안쪽의 중괄호와 return 구문을 생략 가능

※ ES7 React/Redux/GraphQL/React-Natvie snippets 기능 : React할 때 컴포넌트 만들 때 자동으로 만들어짐
rfce - react functional component export
rafce - react arrow functional component export

jsx를 만들고 사용하는 방법 1 (한개만)

//rfce - react functional component export
//rafce - react arrow functional component export
function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export default Header;

import Footer from './Footer.js';

function App() {
	return (
		<>
			<Header />
		</>
	);
}

export default App;

jsx를 만들고 사용하는 방법 2 (여러개 한번에)

//하나의 파일에서 여러개의 컴포넌트 함수를 export 가능 (default 키워드는 제거)
export function Header() {
	return (
		<header>
			<h1>Header</h1>
		</header>
	);
}

export function Footer() {
	return (
		<footer>
			<h1>footer</h1>
		</footer>
	);
}

export function Section() {
	return (
		<section>
			<h1>Layout</h1>
		</section>
	);
}

//하나의 파일에서 여러개의 컴포넌트 비구조할당으로 import 가능
import { Header, Footer, Section } from './Common';

function App() {
	return (
		<>
			<Header />
			<Section />
			<Footer />
		</>
	);
}

export default App;

※ RealDOM - 실제 돔

- HTML 태그를 이용해서 구조를 만들면 브라우저가 이를 해석해서 실제 DOM 형태로 객체를 만들고 화면에 렌더링하는 형태

※ VirtualDOM - 가상 돔

- 실제 브라우저에서 RealDOM으로 변환되기 전 메모리상에서 DOM구조를 가상으로 만들어서 기존의 DOM 구조와 차이점을 분석
- 기존 DOM과 변경되는 부분을 수정해서 최종적으로 RealDOM으로 출력하는 형태

※ JSX

- 리액트에서 자체적으로 가상 돔을 편하게 생성해주는 문법체계 (실제로는 JavaScript로 DOM을 만들지만 개발자의 사용성을 위해 HTML 표현 방식을 채택)

SSR - Server Side Rendering

페이지 이동시 마다 일일이 서버 쪽에 출력할 HTML 파일을 요청
장점) 
1. 초기로딩 속도 빠름
2. 검색엔진에 최적화 (SEO에 좋음)

단점)
1. 페이지 이동 시 마다 서버 쪽 요청을 해야 되기 때문에 깜빡거리면서 로딩이 되는 사용성이 안좋은 점이 있음.

CSR - Client Side Rendering (SPA - Single page Application)

초기에 빈 HTML 파일을 가져오고 화면에 출력 될 모든 정보데이터를 Chunk단위로 구성된 JavaScript 파일을 모두 가져옴
장점)
1. 같은 페이지 안에서 서로 다른 컨텐츠를 실시간으로 변경 하면서 출력 하므로 동적인 컨텐츠 화면 변경이 자유롭고 페이지간 로딩이 없음 (사용성좋음)

단점)
1. 한번에 모든 데이터를 불러와야 되기 때문에 초기 로딩속도가 SSR 방식에 비해선 느림, 검색엔진에 비 최적화