학습내용

• Component
• JSX
• Props
• State

Component

화면을 구성하는 하나의 단위(블록)로 함수로 이루어졌다. 첫글자는 반드시 대문자여야만 한다. 폴더명과 파일명에 모두 카멜케이스를 적용하나 폴더명은 소문자로, 파일명은 대문자로 시작한다.

function App (){
	/* 자바스크립트 */
	return
      <div>
		/* JSX */
      </div>
};

클래스형 컴포넌트 & 함수형 컴포넌트

	클래스형 컴포넌트	함수형 컴포넌트
출시 시기	초기	후기
방식	라이프사이클	리액트 훅
비고	사용을 권장하지 않지만 함수형 컴포넌트의 구조 이해와 클래스형 컴포넌트 프로젝트의 유지보수를 위해 학습 필요	일반적으로 사용하는 컴포넌트

부모-자식관계

한 컴포넌트 안에 다른 컴포넌트를 삽입하는 구조

function Child() {
  return <div>나는 자식입니다.</div>;
}

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

JSX의 규칙

import React from 'react';
import logo from './logo.svg';
import './App.css';

<p sayHello={{color: 'orange', fontSize: '20px'}}>orange</p>

function App() {
  const calculation = {
  	color: 'blue',
  	fontSize: '15px',
  };
  const number = 1;

  return (
    <div className="App">
      <p style={sayHello}>안녕하세요! 리액트 반입니다 :)</p>
      <p style={calculation}>{number > 10 ? number+'은 10보다 크다': number+'은 10보다 작다'}</p>
    </div>
  );
}

export default App;

• 단일한 엘리먼트 반환
• {중괄호}로 자바스크립트 삽입
• json 형식의 style
  {sayHello}처럼 함수밖에서 지정하거나, {calculation}처럼 함수 안에서 제작하는 방법 둘 다 가능하다.

Props

부모 컴포넌트로부터 받아온 데이터. 정확히는 부모 컴포넌트가 자식 컴포넌트에 넘겨주는 데이터이다. 단, 자식 컴포넌트에서 부모 컴포넌트로 props를 전달하는 것은 불가능하다. 해당 개념을 이해하기 위해선 부모-자식관계의 컴포넌트 개념이 선행되어야 한다.

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

function Mother() {
  const name = '신애필';
  return <Child motherName={name} />; // props로 name을 전달
}

function Child(props) {
  return <div>{props.motherName}</div>; //props로 name을 받아옴
}

Props Drilling

특정 컴포넌트에 props로 데이터를 전달하기 위해 해당 데이터가 필요없는 컴포넌트에까지 데이터를 전달하는 것으로 Threading이라고도 한다.

Parent에서 ChildC로 데이터를 전달하기 위해 ChildA, ChildB는 불필요한 데이터를 갖게 된다.

Props Drilling에서는 ChildA에서 ChildB로, 혹은 ChildB에서 ChildC로 전달될 때 프로퍼티에 변동이 생겨 ChildC에서 문제가 발생한다면 해당 프로퍼티를 추적하기 어렵다. 컴포넌트가 깊어질수록 해당 리스크도 증가한다.

Redux 라이브러리를 사용하면 컴포넌트간에 props를 전달하지 않고도 컴포넌트 간에 데이터를 공유할 수 있다.

PropTypes

런타임시 부모로부터 전달받은 Props의 데이터 타입을 검사하는 툴. 자식 컴포넌트와 부모 컴포넌트의 데이터 타입이 불일치시 콘솔에 에러가 표시된다.

children

자식 컴포넌트에게 정보를 전달하는 또 다른 props로 레이아웃 컴포넌트 생성시 유용하다.

function User(props) {
  return <div>{props.children}</div>;
}

function App() {
  return <User>안녕하세요</User>;
}

props 내부값 추출

function Todo({ title, body, isDone, id }){
	return <div>{title}</div>
}

구조분해할당을 사용하면 props.를 사용하지 않고도 props 데이터를 사용할 수 있다.

defaultProps

임시로 지정한 props값. 부모로부터 props를 전달받지 않은 상태에서 사용하며 부모에게서 전달받을 시, 부모로부터 받은 props로 변경된다.
방법①

function Child({ name }){
	return <div>내 이름은 {name} 입니다. </div>
}

Child.defaultProps={
	name: '기본 이름'
}

방법②

function Child({ name = '기본이름' }){
	return <div>내 이름은 {name} 입니다. </div>
}

state

컴포낸트 내부의 변동 가능성 있는 유동적인 값. onClick, onChange 이벤트 등과 함께 쓰인다.
const [ value, setValue ] = useState( 초기값 )