리액트 왜 배우나?

생산성/재사용성

• JSX를 활용하여 HTML 내에 필요한 데이터를 한 공간에 삽입할 수 있어 개발이 간단해지고 다른 사람이 개발 의도를 파악하기 쉬워진다!

todo-list 만들기~!

• 오오 신기하다

state

• 컴포넌트 내에서 "State"를 이용해서 데이터를 유동적으로 관리
• 'State'가 변경될 때마다 컴포넌트가 다시 렌더링 된다!!

JSX

장점

1. 개발자 편의성 향상
2. 협업에 용이 / 생산성 향상
3. 문법 오류와 코드량 감소
   HTML의 문법과는 약간 다르니까 사용법을 익혀보자~!

JSX에서 인라인 스타일

<div className="greeting" style={{padding:10, color:'red'}}>{name}님 안녕하세요.<br /></div>

• style에서 첫번째 중괄호는 JS문법을 시작한다고 알리는 것이고 두번째 중괄호는 JS object의 시작을 알리는 의미이다.

Component

Component?

1. react에서 페이지를 구성하는 최소 단위
2. Component의 이름은 대문자로 시작
3. class Component / function Component로 나뉨
4. Controlled Component / unControlled Component

Component의 특징

1. 컴포넌트끼리 데이터를 주고 받을땐 Props
2. 컴포넌트 내에서 데이터를 관리할땐 State
3. 데이터는 부모 → 자식으로만 전달

Props

• 기본적으로 Component에 원하는 값을 넘겨줄 때 사용하며
  넘겨줄 수 있는 값은 변수, 함수, 객체, 배열 등 JavaScript의 요소라면 제한이 없습니다. 주로 Component의 ‘재사용’을 위하여 사용한다.

State

• State는 Component내에서 유동적으로 변할 수 있는 값을 저장
• State 값을 직접 변경하게 되면 React가 Component를 다시 렌더링 할 타이밍을 알아차리지 못한다. 반드시 setState 함수를 이용해서 값을 변경!!!

Object를 갖는 State를 만들 때 주의사항

const [user, setUser] = useState({name: "민수", grade: 1}) setUser((current) => {
  current.grade = 2;
  return current;
})

• user object 안의 grade가 변경되었지만 user 자체는 변경되지 않았기 때문입니다.
• 위의 코드는 바뀌지 않는다.

const [user, setUser] = useState({name: '민수', grade: 1 }) setUser((current) => {
  const newUser = { ...current }
  newUser.grade = 2
  return newUser
})

• 위와 같이 새로운 Object를 생성해서 리턴해줘야된다!!!

Event

• 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다.
• React에서 이벤트를 처리하는 방법은 크게 두 가지 방법이 있습니다.
• 별도의 핸들링 함수를 선언하고 Element에 넘겨주는 방법과 이벤트를 할당하는 부분에서 익명 함수를 작성하는 방법으로 나뉩니다.

많이 쓰는 이벤트

onClick: Element를 클릭했을 때
onChange: Element의 내용이 변경되었을 때(input의 텍스트를 변경, 파일 선택 등) onKeyDown, onKeyUp, onKeyPress: 키보드 입력이 일어났을 때 onDoubleClick: Element를 더블 클릭했을 때
onFocus: Element에 Focus되었을 때
onBlur: Element가 Focus를 잃었을 때
onSubmit: Form Element에서 Submit 했을 때

컴포넌트 내 이벤트 처리

const App = () => {
const [user, setUser] = useState({ name; "민수",
school: "엘리스대학교" });
const handleChange = (event) => {
const { name, value } = event.target; const newUser = { ...user }; newUser[name] = value; setUser(newUser);
};
  return (
    <div>
      <input name="name" onChange={handleChange}
value={user.name} />
<br />
      <input name="school" onChange={handleChange}
value={user.school} />
<p>
{user.name}님은 {user.school}에 재학중입니다.
</p> </div>
); };

• target으로부터 name을 받아와 해당 name의 key에 해당하는 value를 변경하여 state에 반영.

다른 컴포넌트로 이벤트 전달

• 사용자가 입력한 정보를 현재 컴포넌트가 아닌 부모 컴포넌트에서 활용해야 하는 경우
  예시와 같이 이벤트를 Props로 전달하여 처리할 수 있습니다.

Hooks

Hook의 등장 배경

• 컴포넌트 내에서 State와 생명주기를 관리하기 위해 반드시 클래스 컴포넌트를 사용해야했다.
• 함수 컴포넌트를 사용하기 위해 아주 필요함~!

유의사항

• Hook은 React함수 내에서만 사용이 가능하다.
• Hook의 이름은 반드시 'use'로 시작
• 최상위 레벨에서만 Hook을 호출 할 수 있다.

State Hook

• useState는 컴포넌트 내 동적 데이터를 관리할 수 있는 hook입니다.
• 최초에 useState가 호출될 때 초기값으로 설정되며 이후 재 렌더링이 될 경우 무시
• state는 읽기 전용이므로 직접 수정하면 안된다.
• state를 변경하기 위해서는 setState를 이용해야한다.
• state가 변경되면 자동으로 컴포넌트가 재 렌더링 된다.

Effect Hook

• Effect Hook을 사용하면 함수 컴포넌트에서 side Effect를 수행할 수 있다.
• 컴포넌트가 최초로 렌더링 될 때, 지정한 state나 prop가 변경될 때마다 이펙트 콜백 함수가 호출된다.

const App = () => {
	useEffect(EffectCallBack, Deps?)
}

• Deps : 변경을 감지할 변수들의 집합(배열)
• EffectCallback : Deps에 지정된 변수가 변경될 때 실항할 함수

이외의 hooks

useMemo

• 지정한 state나 props가 변경될 경우 해당값을 활용해 계산된 값을 메모이제이션하여 재렌더링 시 불필요한 연산을 줄인다.

useCallback

useRef

• 이건 좀 알아봐야겟따 ㅜㅜ

종합 실습~

출처 : 엘리스 아카데미