개발자.. 너란놈..

※ useEffect

- 컴포넌트의 생명주기를 관장하는 hook
- Life cycle : 생성(Mount), 변경(state change), 소멸(UnMount)
- useEffect(실행할 함수,[의존성배열])
- 기본 useEffect 사용 하는 방법
         EX) useEffect(() => {}, []);

- useEffect 생명주기

의존성 배열이 비어있으면 해당 구문은 처음 Component가 Mount 되었을 때 한번만 실행 
실제 사례) 
    1. 외부 데이터를 fetching하는 무거운 함수를 처음 한번만 호출 해야 될 때
    2. window객체에 이벤트 바인딩 할 때 (Browser Scroll , Resize 이벤트 연결 시)
사용 방법)
    //의존성 배열이 비어있는 useEffect문
    useEffect(() => {
        console.log('팝업 컴포넌트 생성');
    }, []);

의존성 배열에 특정 State가 등록되어 잇으면 해당 State가 변경될 때 마다 실행
실제 사례)
    1. 외부 fetching 데이터를 변경 할 때 마다 loading 이미지 출력 할 때

사용 방법)
//의존성배열에 특정 State 값이 등록되어 있는 useEffect문
    useEffect(() => {
         console.log('Num state값 변경');
    }, [Num]);

의존성 배열이 비어있는 상태에서 함수가 리턴되면 해당 함수는 Component가 UnMount 될때 한번만 실행
실제 사례)

1. 레이어 팝업 제거 시 부모창의 scroll bar 다시 보이게 하기

사용 방법)
    //의존성배열이 비어있는 상태에서 특정 함수가 리턴되는 useEffect문 (컴포넌트의 소멸을 캐치)
    useEffect(() => {
        return () => {
            console.log('컴포넌트 소멸');
        };
    }, [Num]);

※ useEffect에서 사용하는 지역변수를 다른 useEffect에서 사용하는 방법

- useStage를 이용하여 useEffect의 지역 변수를 넣어준다.
☆ 주의점 : 다른 useEffect에서 사용할 때 undefined가 뜰 수 있기 때문에 객체라면 객체? 로 한번 스킵 할 수 있도록 사용한다.

※ useEffect에 변수를 많이 넣지 않아야 하는 이유

- useEffect에서 넣으면 브라우저의 사용량이 늘어난다.

※ useEffect에 addEventListener를 사용할 때 주의점

- event 입력 시 다른 페이지의 영향이 될 수 있기 때문에 꼭 removeEventListener를 해줘야지만 다른 페이지의 영향이 가지 않는다.

※ 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 표현 방식을 채택)