[처음 만난 리액트(React)]::section9, 10, 11

오젼·2022년 7월 14일
Reactfront end
0

[처음 만난 리액트(React)]

목록 보기
4/5

Section 9. Conditional Rendering

Conditional Rendering의 정의와 Inline Conditions

Conditional Rendering

  • 조건부 rendering

truthy / falsy

  • 자바스크립트의 truthy, falsy: true는 아니지만 true로 여겨지는 값, false는 아니지만 false로 여겨지는 값
// truthy
true
{} (empty object)
[] (empty array)
32 (number, not zero)
"0", "false" (string, not empty)

//falsy
false
0, -0 (zero, minus zero)
0n (BigInt zero)
'', "", `` (empty string)
null
undefined
NaN (not a number)

Element Variables

  • 리액트 element를 변수처럼 다루는 방법
  • 그냥 변수가 element도 될 수 있다.. 정도로 생각하면 될 듯

Inline Conditions

  • Inline If: && 사용. short circuit evaluation 사용.
  • Inline If-Else: 삼항 연산자 사용.

Component 렌더링 막기

  • null을 리턴하면 렌더링 되지 않음
function WarningBanner(props) {
  if (!props.warning) {
    return null; // 렌더링 되지 않음
  }
  
  return (
    <div>경고!</div>
  );
}
  • class component의 함수에서 널을 리턴하는 것은 컴포넌트의 lifecycle 함수에 전혀 영향을 미치지 않음

(실습)로그인 여부를 나타내는 툴바 만들기

// Toolbar.jsx
import React from "react";

const styles = {
	wrapper: {
		padding: 16,
		display: "flex",
		flexDirection: "row",
		borderBottom: "1px solid grey",
	},
	greeting: {
		marginRight: 8,
	},
};

function Toolbar(props) {
	const { isLoggedIn, onClickLogin, onClickLogout } = props;

	return (
      // &&으로 inline if
      // ?으로 inline if-else 구현
		<div style={styles.wrapper}>
			{isLoggedIn && <span style={styles.greeting}>환영합니다!</span>}

			{isLoggedIn ? (
				<button onClick={onClickLogout}>로그아웃</button>
			) : (
				<button onClick={onClickLogin}>로그인</button>
			)}
		</div>
	);
}

export default Toolbar;
// LandingPage.jsx
import React, { useState } from "react";
import Toolbar from "./Toolbar";

function LandingPage(props) {
  	// useState로 isLoggedIn state 변수 선언
	const [isLoggedIn, setIsLoggedIn] = useState(false);

  	// onClickLogin 함수와 onClickLogout 함수 구현
	const onClickLogin = () => {
		setIsLoggedIn(true);
	};

	const onClickLogout = () => {
		setIsLoggedIn(false);
	};

	return (
		<div>
			<Toolbar 
				isLoggedIn={isLoggedIn}
				onClickLogin={onClickLogin}
				onClickLogout={onClickLogout}
			/>
			<div style={{ padding: 16 }}>소플과 함께 하는 리액트 공부!</div>
		</div>
	);
}

export default LandingPage;
//index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

import Library from './chapter_03/Library';
import Clock from './chapter_04/Clock';
import CommentList from './chapter_05/CommentList';
import NotificationList from './chapter_06/NotificationList';
import Accommodate from './chapter_07/Accommodate';
import ConfirmButton from './chapter_08/ConfirmButton';
import LandingPage from './chapter_09/LandingPage';

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(
  <React.StrictMode>
    <LandingPage />
  </React.StrictMode>,
  document.getElementById('root')
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Section 10. List and Keys

List와 Key

  • List: 목록. 같은 아이템을 순서대로 모아놓은 것
  • Key: 각 객체나 아이템을 구분할 수 있는 고유한 값. 아이템들을 구분하기 위한 고유한 문자열.

여러 개의 Component 렌더링 하기

  • map 함수: 배열을 순서대로 돌며 함수 적용한 배열 리턴해줌
  • 배열.map(); 으로 사용

List의 Key

  • Key값은 같은 List에 있는 elemets 사이에서만 고유한 값이면 된다 ex) 1반 1번과 2반 1번이 다른 것처럼
  • map 함수 안에 있는 elements는 꼭 key가 필요하다!
  • key를 사용하는 방법: 숫자, id, index 등이 있음
  • 배열에서 아이템의 순서가 바뀔 수 있는 경우 index사용은 권장되지 않음
  • 리액트에서는 key값을 명시적으로 정하지 않은 경우 index가 기본으로 사용됨

(실습)출석부 출력하기

// 키가 빠져있는 경우
const students = [
	{
		name: "Mark",
	},
	{
		name: "Peter",
	},
	{
		name: "Andy",
	},
];

function AttendanceBook(props) {
	return (
		<ul>
			{students.map((student) => {
				return <li>{student.name}</li>;
			})}
		</ul>
	);
}

  • warning 발생
// 키를 추가해준 경우
import React from "react";

const students = [
	{
		id: 1,
		name: "Mark",
	},
	{
		id: 2,
		name: "Peter",
	},
	{
		id: 3,
		name: "Andy",
	},
];

function AttendanceBook(props) {
	return (
		<ul>
			{students.map((student) => {
				return <li key={student.id}>{student.name}</li>;
			})}
		</ul>
	);
}

export default AttendanceBook;

  • warning 사라짐

Section 11. Forms

Form과 Controlled Component

  • Form: 사용자로부터 입력을 받기 위해 사용
  • Controlled Components: 사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트. 값이 리액트의 통제를 받는 Input Form Element.

  • 위 사진은 class component 기준. 함수 component에선 useState훅을 사용하여 state 관리
  • html form에선 각 엘리먼트가 자체적으로 state를 관리. 자바스크립트 코드로 각각의 값에 접근하는 것이 어려움.
  • Controlled Component에선 모든 데이터를 state에서 관리. 리액트에서 모든 값 통제 가능

다양한 Forms

Textarea 태그

  • 여러줄에 걸친 긴 텍스트 입력을 받기 위한 html 태그
<!-- html 방식 -->
<textarea>
  안녕하세요
</textarea>
// jsx 방식
function RequestForm(props) {
  const [value, setValue] = useState('요청사항을 입력하세요.');
  
  const handleChange = (event) => {
    setValue(event.target.value);
  }
  
  const handleSubmit = (event) => {
    alert('입력한 요청사항: ' + value);
    event.preventDefault();
  }
  
  return (
    // textarea의 value로 넣어줘서 사용
    <form onSubmit={handleSubmit}>
      <label>
        요청사항:
        <textarea value={value} />
      </label>
      <button type="submit">제출</button>
    </form>
  );
}

Select 태그

  • Drop-down 목록을 보여주기 위한 html 태그
  • 리액트에선 select의 value값으로 넣어준다.

각 텍스트 관련 태그(input, textarea, select)를 컨트롤드 컴포넌트로 만드는 방식은 모두 비슷하다. value로 값을 전달하고 값을 변경하고 싶을 때는 onChange에서 setValue함수를 사용하여 값을 업데이트 한다.

File input 태그

  • 디바이스의 저장장치로부터 파일을 선택할 수 있게 해주는 html 태그
<input type="file" />
  • file input태그는 읽기전용이기 때문에 Uncontrolled Component가 된다. 리액트의 통제를 받지 않는 컴포넌트.

Multiple Inputs

  • 여러개의 state를 선언하여 각각의 입력에 대해 사용

Input Null Value

// hi가 input value로 들어가 있으면 수정이 안 됨
ReactDOM.render(<input value="hi" />, rootNode);

// 1초 뒤에 input value가 널인 인풋 태그가 렌더링 되면서 입력 가능한 상태로 바뀜 
setTimeout(function() {
  ReactDOM.render(<input value={null} />, rootNode);
}, 1000);

(실습)사용자 정보 입력 받기

import React, { useState } from "react";

function SignUp(props) {
	const [name, setName] = useState("");

	const handleChangeName = (event) => {
		setName(event.target.value);
	};

	const handleSubmit = (event) => {
		alert(`이름: ${name}`);
		event.preventDefault();
	};

	return (
		// input태그의 value로 내용을 넣어줌. 여기선 name을 ""로 초기화 했었기 때문에 빈 입력으로 들어가 있음
		<form onSubmit={handleSubmit}>
			<label>
				이름:
				<input type="text" value={name} onChange={handleChangeName} />
			</label>
			<button type="submit">제출</button>
		</form>
	);
}

export default SignUp;

(실습)성별 필드 추가하기

import React, { useState } from "react";

function SignUp(props) {
	const [name, setName] = useState("");
	const [gender, setGender] = useState("남자");

	const handleChangeName = (event) => {
		setName(event.target.value);
	};

	const handleChangeGender = (event) => {
		setGender(event.target.value);
	};

	const handleSubmit = (event) => {
		alert(`이름: ${name} 성별: ${gender}`);
		event.preventDefault();
	};

	return (
		// input태그의 value로 내용을 넣어줌. 여기선 name을 ""로 초기화 했었기 때문에 빈 입력으로 들어가 있음
		<form onSubmit={handleSubmit}>
			<label>
				이름:
				<input type="text" value={name} onChange={handleChangeName} />
			</label>
			<br />
			<label>
				성별:
				<select value={gender} onChange={handleChangeGender}>
					<option value="남자">남자</option>
					<option value="여자">여자</option>
				</select>
			</label>
			<button type="submit">제출</button>
		</form>
	);
}

export default SignUp;
profile
오젼
이전 포스트

[처음 만난 리액트(React)]::section6, 7, 8

다음 포스트

[처음 만난 리액트(React)]::section12, 13, 14, 15

0개의 댓글

관련 채용 정보