(2021.12.30)

✅ React Component

• 컴포넌트를 통해 UI를 재사용가능한 여러 조각으로 나눈다.

• 컴포넌트는 'props'라는 입력을 받아 화면에 표시되는 'React 엘리먼트'를 반환

• 엘리먼트란 컴포넌트의 구성요소

• 함수형 컴포넌트와 클래스형 컴포넌트가 존재한다.

• 출처: [React] Component와 props, state

📌 Class(클래스) Component

	class Welcome extends React.Component {
		render() {
			return <h1>Hello</h1>;
		}
	}

• React.Component 클래스를 상속을 받는다
• JSX를 반환해야 하는데 class는 return문 사용 못함
• 따라서 JSX를 반환하기 위해 별도의 render()함수를 사용
• 리액트는 클래스형 컴포넌트의 render()함수를 자동 실행

📌 Function(함수) Component

	function Welcome(props) {
		return <h1>Hello</h1>;
	}

• props로 받을 인자를 정의
• 함수형 컴포넌트는 JSX를 return문으로 반환

📌 props 지정하기

<ComponentName prop1={propValue1} prop2={propValue2} ... />

• 같은 타입의 컴포넌트에 다른 props 값을 준다.
• props는 문자열 제외 모두 {}로 감싸야 한다.

📌 props 받아 사용하기

• props는 읽기 전용

• 컴포넌트의 내부에서 props를 수정해서는 안된다.

• props를 받는 함수형 컴포넌트에 인자를 정의
  👉 props를 속성으로 가지는 객체 object 해당인자로 전달

• 연산자(.)를 사용하여 원하는 props를 꺼내씀
  👉 { [인자 이름].[props 이름] } 형태로 사용

// 객체 인자를 통해 props 받아오기
function Dog(props) {
	return {
		<div>{props.name}</div>
		<div>{props.age}</div>
	}
}

✅ sessionStorage

• sessionStorage.setItem(keyName, keyValue) :
  keyName에 해당하는 값을 만들거나 수정

• var aValue = sessionStorage.getItem(keyName) :
  keyName에 해당하는 값을 리턴. 키가 없을때는 null 리턴

• var aKeyName = sessionStorage.key(index):
  index번째 키 이름을 리턴

• sessionStorage.length:
  저장된 데이터의 갯수를 리턴

• sessionStorage.removeItem(keyName):
  keyName 에 해당하는 값을 삭제

• sessionStorage.clear():
  모든 데이터를 삭제

• 출처: https://sub0709.tistory.com/55 [쓸데없는 코딩하기]

(2021.12.31)

✅ JSX 소개

(출처: React 공식 문서)

📌 변수 선언 예시

const element = <h1>Hello, world!</h1>;

• JSX 👉 JavaScript를 확장한 문법
• JavaScript의 모든 기능포함
• JSX는 React 엘리먼트를 생성

📌 JSX란?

• React에서는 렌더링 로직이 UI로직(이벤트 처리방식, 시간 따라 state가 변하는 방식, 화면에 표시하기 위한 데이터 준비방식)과 연결 ❓

📌 JSX에 표현식 포함하기

📘 변수 JSX 선언

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

• name이라는 변수 선언 후, 중괄호로 감싸 JSX안에 사용
• JSX의 중괄호 안에는 모든 JavaScript 표현식 사용가능

📘 JavaScript 표현식 JSX 사용

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

• 해당 예시에서는 JavaScript의 함수 호출의 결과인 formatName(user)를 <h1> 엘리먼트에 포함

📌 JSX도 표현식이다.

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

• JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환가능

📌 JSX 속성 정의

• 어트리뷰트에 따옴표를 이용해 문자열 리터럴을 정의

const element = <div tabIndex="0"></div>;

• 중괄호를 사용하여 어트리뷰트에 JavaScript 표현식 삽입가능

const element = <img src={user.avatarUrl}></img>;

• 어트리뷰트에 JavaScript 표현식을 삽입할 때 중괄호 주변에 따옴표를 입력 X ❓

📌 JSX로 자식정의

• JSX 태그는 자식을 포함할 수 있다.

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

📌 JSX 객체표현 ❓