React

React | props์™€ state

2022. 1. 14. 09:29
๋ชฉ์ฐจ
  1. 1๏ธโƒฃ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ pros ๊ฐ’ ์ง€์ •ํ•˜๊ธฐ
  2. 2๏ธโƒฃ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ๋ฌธ๋ฒ•์„ ํ†ตํ•ด props ๋‚ด๋ถ€ ๊ฐ’ ์ถ”์ถœํ•˜๊ธฐ
  3. 3๏ธโƒฃ propTypes๋ฅผ ํ†ตํ•œ props ๊ฒ€์ฆ
  4. 4๏ธโƒฃ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ props ์‚ฌ์šฉํ•˜๊ธฐ
  5. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ defaultProps์™€ proTypes ์„ค์ •
  6. constructor ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  state ์ดˆ๊นƒ๊ฐ’ ์„ค์ •
  7. ๐Ÿฅฏ state๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ ์‚ฌํ•ญ
  8. props, state ํ™œ์šฉ์˜ˆ์ œ

๐Ÿฃ props

- Component ์†์„ฑ์„ ์„ค์ •ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์š”์†Œ
- ํ•ด๋‹น ์ปดํฌ๋„ŒํŠธ๋ฅผ ๋ถˆ๋Ÿฌ์™€ ์‚ฌ์šฉํ•˜๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅ

1๏ธโƒฃ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ pros ๊ฐ’ ์ง€์ •ํ•˜๊ธฐ

๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์ธ App ์ปดํฌ๋„ŒํŠธ์—์„œ MyComponent์˜ props ๊ฐ’์„ ์ง€์ •, MyComponenet์—์„œ props ์‚ฌ์šฉ

2๏ธโƒฃ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ๋ฌธ๋ฒ•์„ ํ†ตํ•ด props ๋‚ด๋ถ€ ๊ฐ’ ์ถ”์ถœํ•˜๊ธฐ

๊ฐ์ฒด์—์„œ ๊ฐ’์„ ์ถ”์ถœํ•˜๋Š” ๋ฌธ๋ฒ• === ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น(destructuring assignment) === ๊ตฌ์กฐ ๋ถ„ํ•ด ๋ฌธ๋ฒ•
ํ•จ์ˆ˜์˜ ํŒŒ๋ผ๋ฏธํ„ฐ๊ฐ€ ๊ฐ์ฒด๋ผ๋ฉด ๊ทธ ๊ฐ’์„ ๋ฐ”๋กœ ๋น„๊ตฌ์กฐํ™”ํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

# ๊ฐ์ฒด์—์„œ ๊ฐ’์„ ์ถ”์ถœํ•˜๋Š” ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น
const MyComponent = (props) => {
  const { name, title } = props;
  return (
    <div>
      ์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ ์ด๋ฆ„์€ {name} ์ด๊ณ , ์ด๊ฒƒ์€ {title}์ž…๋‹ˆ๋‹ค.
      <br />
    </div>
  );
};

# ๊ฐ์ฒด์ธ ํ•จ์ˆ˜ ํŒŒ๋ผ๋ฏธํ„ฐ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น
const MyComponent = ({ name, title }) => {
  return (
    <div>
      ์•ˆ๋…•ํ•˜์„ธ์š”, ์ œ ์ด๋ฆ„์€ {name} ์ด๊ณ , ์ด๊ฒƒ์€ {title}์ž…๋‹ˆ๋‹ค.
      <br />
    </div>
  );
};

3๏ธโƒฃ propTypes๋ฅผ ํ†ตํ•œ props ๊ฒ€์ฆ

๋ฐฑ์—”๋“œ์™€ ๋ฐ์ดํ„ฐ๋ฅผ ์ „๋‹ฌ ๋ฐ›์„ ๋•Œ type์„ ์ง€์ •ํ•ด์ค˜์•ผํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋Š”๋ฐ propTypes๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์ปดํฌ๋„ŒํŠธ์˜ ํ•„์ˆ˜ props๋ฅผ ์ง€์ •ํ•˜๊ฑฐ๋‚˜ props์˜ ํƒ€์ž…์„ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

ํƒ€์ž…์„ ์ง€์ •ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„  import ๊ตฌ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ 'prop-types' ๋ฅผ ๋ถˆ๋Ÿฌ์™€์•ผ ํ•œ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์œ„์™€ ๊ฐ™์ด type์„ ์ง€์ •ํ•œ ๋‹ค์Œ App.js ์—์„œ string์œผ๋กœ ์ง€์ •๋œ props์˜ ๊ฐ’์œผ๋กœ number๋ฅผ ์ „๋‹ฌํ•˜๋ฉด Console์— ์—๋Ÿฌ๋ฉ”์‹œ์ง€๊ฐ€ ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ๋‹ค.

4๏ธโƒฃ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ props ์‚ฌ์šฉํ•˜๊ธฐ

# MyComponent.js
class MyComponent extends Component {
  render() {
    const { name, favoriteNumber, children } = this.props; // ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น
    return (
      .
      .

ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ defaultProps์™€ proTypes ์„ค์ •

class MyComponent extends Component {
  static defaultProps = {
    name: '๊ธฐ๋ณธ ์ด๋ฆ„'
  };
  static propTypes = {
    name: Protypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
render() {
  const { name, favoriteNumber, children } = this.props;
  return(...);
  }
}

๐Ÿ– state

state๋Š” ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ๋ฐ”๋€” ์ˆ˜ ์žˆ๋Š” ๊ฐ’
props๋Š” ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์‚ฌ์šฉ๋˜๋Š” ๊ณผ์ •์—์„œ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์„ค์ •ํ•˜๋Š” ๊ฐ’์ด๋ฉฐ, ์ปดํฌ๋„ŒํŠธ ์ž์‹ ์€ ํ•ด๋‹น props๋ฅผ ์ฝ๊ธฐ ์ „์šฉ์œผ๋กœ๋งŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ฆฌ์•กํŠธ์˜ state 2๊ฐ€์ง€

  1. state์—๋Š” ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ๊ฐ€ ์ง€๋‹ˆ๊ณ  ์žˆ๋Š” state.
  2. ํ•จ์ˆ˜ ์ปดํฌ๋„ŒํŠธ์—์„œ useState๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉํ•˜๋Š” state.
# Counter.js
class Count extends Component {
  constructor(props) {
    super(props);

    this.state = {
      // state ์ดˆ๊ธฐ๊ฐ’ ์„ค์ •
      number: 0,
    };
  }
  render() {
    const { number } = this.state; // this.state๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ state ์กฐํšŒ
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

์ปดํฌ๋„ŒํŠธ์—์„œ state๋ฅผ ์„ค์ •ํ•  ๋•Œ๋Š” constructor ๋ฉ”์„œ๋“œ๋ฅผ ์ž‘์„ฑํ•˜์—ฌ ์„ค์ •ํ•œ๋‹ค.

ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ constructor๋ฅผ ์ž‘์„ฑํ•  ๋•Œ๋Š” ๋ฐ˜๋“œ์‹œ super(props)๋ฅผ ํ˜ธ์ถœํ•ด์ค˜์•ผ ํ•œ๋‹ค.
์ปดํฌ๋„ŒํŠธ์˜ state๋Š” ๊ฐ์ฒด ํ˜•์‹์ด์–ด์•ผ ํ•œ๋‹ค.

constructor ๋ฉ”์„œ๋“œ๋Š” rendering ๋  ๋•Œ ์ดˆ๊ธฐํ™”๋ฅผ ๋‹ด๋‹น.

์ด๋ฒคํŠธ๋กœ ์„ค์ •ํ•  ํ•จ์ˆ˜๋ฅผ ๋„ฃ์–ด ์ค„๋•Œ๋Š” ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ๋ฌธ๋ฒ•์„ ์‚ฌ์šฉํ•˜์—ฌ์•ผ ํ•œ๋‹ค.
ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ๋Š” this.setState ํ•จ์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ state ๊ฐ’์„ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค.

constructor ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  state ์ดˆ๊นƒ๊ฐ’ ์„ค์ •

# Counter.js
class Counter extends Component {
  state = {
    number: 0,
    fixedNumber: 0
  };
render()...

๐Ÿฅฏ state๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ ์‚ฌํ•ญ

โญ๏ธ ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด๋ฅผ ์—…๋ฐ์ดํŠธ ํ•ด์•ผํ•  ๋•Œ
=> ๋ฐฐ์—ด์ด๋‚˜ ๊ฐ์ฒด ์‚ฌ๋ณธ์„ ๋งŒ๋“ค๊ณ  ๊ทธ ์‚ฌ๋ณธ์— ๊ฐ’์„ ์—…๋ฐ์ดํŠธ ํ•œ ํ›„, ๊ทธ ์‚ฌ๋ณธ์˜ ์ƒํƒœ๋ฅผ setState ํ˜น์€ Setter ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์—…๋ฐ์ดํŠธ ํ•œ๋‹ค.

# i.e
//๊ฐ์ฒด ๋‹ค๋ฃจ๊ธฐ
const array = [
  { id: 1, value: true},
  { id: 2, value: true},
  { id: 3, value: false},
];
let nextArray = array.concat({id:4});    // ์ƒˆํ•ญ๋ชฉ ์ถ”๊ฐ€
nextArray.filter(item => item.id !== 2);    // id๊ฐ€ 2์ธ ํ•ญ๋ชฉ ์ œ๊ฑฐ
nextArray.map(item => item.id === 1 ? {...item, value: false} : item)); 
// id๊ฐ€ 1์ธ ํ•ญ๋ชฉ์˜ value๋ฅผ false๋กœ ์„ค์ •

โœจโœจโœจโœจโœจ
๊ฐ์ฒด์— ๋Œ€ํ•œ ์‚ฌ๋ณธ์„ ๋งŒ๋“ค๋•Œ๋Š” spread ์—ฐ์‚ฐ์ž ....
๋ฐฐ์—ด์— ๋Œ€ํ•œ ์‚ฌ๋ณธ์„ ๋งŒ๋“ค๋•Œ๋Š” ๋ฐฐ์—ด์˜ ๋‚ด์žฅํ•จ์ˆ˜ ์‚ฌ์šฉ
โœจโœจโœจโœจโœจ

props, state ํ™œ์šฉ์˜ˆ์ œ

  1. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์ธ App ์—์„œ this.state ๋กœ content๋ผ๋Š” ์ด๋ฆ„์˜ ๊ฐ์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ์ƒ์„ฑ
  2. ์ž์‹ ์ปดํฌ๋„ŒํŠธ์ธ TOC ์— this.state.content๋กœ ๊ฐ์ฒด ๋ฐ์ดํ„ฐ ์ „๋‹ฌ
  3. TOC ์ปดํฌ๋„ŒํŠธ์—์„œ ๋ฐ›์€ ๊ฐ์ฒด๋ฐ์ดํ„ฐ๋ฅผ while ๋ฐ˜๋ชฉ๋ฌธ์„ ์‚ฌ์šฉํ•˜์—ฌ list์— DOM์„ ์ƒ์„ฑํ•˜์—ฌ ์ „๋‹ฌ

'React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

React | do not nest ternary expression (Nextjs , typescript, airbnb style guide)  (0) 2022.02.10
React | ๋™์  ๋ผ์šฐํŒ…  (0) 2022.01.26
React | ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”(React๋ฅผ ์ด์šฉํ•˜์—ฌ)  (0) 2022.01.13
React | Router ์š”์•ฝ  (0) 2022.01.12
React | Routes Component & Sass  (0) 2022.01.11
  1. 1๏ธโƒฃ ์ปดํฌ๋„ŒํŠธ๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ pros ๊ฐ’ ์ง€์ •ํ•˜๊ธฐ
  2. 2๏ธโƒฃ ๋น„๊ตฌ์กฐํ™” ํ• ๋‹น ๋ฌธ๋ฒ•์„ ํ†ตํ•ด props ๋‚ด๋ถ€ ๊ฐ’ ์ถ”์ถœํ•˜๊ธฐ
  3. 3๏ธโƒฃ propTypes๋ฅผ ํ†ตํ•œ props ๊ฒ€์ฆ
  4. 4๏ธโƒฃ ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ์—์„œ props ์‚ฌ์šฉํ•˜๊ธฐ
  5. ํด๋ž˜์Šคํ˜• ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ defaultProps์™€ proTypes ์„ค์ •
  6. constructor ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š๊ณ  state ์ดˆ๊นƒ๊ฐ’ ์„ค์ •
  7. ๐Ÿฅฏ state๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ฃผ์˜ ์‚ฌํ•ญ
  8. props, state ํ™œ์šฉ์˜ˆ์ œ
'React' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€
  • React | do not nest ternary expression (Nextjs , typescript, airbnb style guide)
  • React | ๋™์  ๋ผ์šฐํŒ…
  • React | ๋กœ๊ทธ์ธ ๋ฒ„ํŠผ ํ™œ์„ฑํ™”(React๋ฅผ ์ด์šฉํ•˜์—ฌ)
  • React | Router ์š”์•ฝ
3jun
3jun
3jun3jun ๋‹˜์˜ ๋ธ”๋กœ๊ทธ์ž…๋‹ˆ๋‹ค.
3jun
3jun
3jun
์ „์ฒด
์˜ค๋Š˜
์–ด์ œ
  • ๋ถ„๋ฅ˜ ์ „์ฒด๋ณด๊ธฐ (94)
    • ํ”„๋กœ์ ํŠธ (5)
    • Web (9)
    • JavaScript (19)
    • React (12)
    • ์•Œ๊ณ ๋ฆฌ์ฆ˜ (31)
    • Git (3)
    • AWS (3)
    • TypeScript (3)
    • CS (2)
    • Error (6)
    • ํšŒ๊ณ  (1)

๋ธ”๋กœ๊ทธ ๋ฉ”๋‰ด

  • ํ™ˆ
  • ํƒœ๊ทธ
  • ๋ฐฉ๋ช…๋ก

๊ณต์ง€์‚ฌํ•ญ

์ธ๊ธฐ ๊ธ€

ํƒœ๊ทธ

  • msw ์—๋Ÿฌ
  • ๋ฐฑ์ค€ ์ฝ”ํ…Œ
  • outer environment
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ์ฝ”๋”ฉํ…Œ์ŠคํŠธ
  • msw
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ์ฝ”๋”ฉํ…Œ์ŠคํŠธ js
  • state
  • react
  • this.props.history.push
  • airbnb style guide
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค ์ฝ”ํ…Œ
  • ์œ ํšจ์„ฑ ๋กœ์ง
  • ๋ฐฑ์ค€ js
  • Promise
  • JavaScript
  • ๋ฐฑ์ค€ ์•Œ๊ณ ๋ฆฌ์ฆ˜
  • ๋ฐฑ์ค€ ์˜จ๋ผ์ธ์ €์ง€
  • ํ”„๋กœ๊ทธ๋ž˜๋จธ์Šค js
  • ๋ฐฑ์ค€js

์ตœ๊ทผ ๋Œ“๊ธ€

์ตœ๊ทผ ๊ธ€

hELLO ยท Designed By ์ •์ƒ์šฐ.
3jun
React | props์™€ state
์ƒ๋‹จ์œผ๋กœ

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”

๋‹จ์ถ•ํ‚ค

๋‚ด ๋ธ”๋กœ๊ทธ

๋‚ด ๋ธ”๋กœ๊ทธ - ๊ด€๋ฆฌ์ž ํ™ˆ ์ „ํ™˜
Q
Q
์ƒˆ ๊ธ€ ์“ฐ๊ธฐ
W
W

๋ธ”๋กœ๊ทธ ๊ฒŒ์‹œ๊ธ€

๊ธ€ ์ˆ˜์ • (๊ถŒํ•œ ์žˆ๋Š” ๊ฒฝ์šฐ)
E
E
๋Œ“๊ธ€ ์˜์—ญ์œผ๋กœ ์ด๋™
C
C

๋ชจ๋“  ์˜์—ญ

์ด ํŽ˜์ด์ง€์˜ URL ๋ณต์‚ฌ
S
S
๋งจ ์œ„๋กœ ์ด๋™
T
T
ํ‹ฐ์Šคํ† ๋ฆฌ ํ™ˆ ์ด๋™
H
H
๋‹จ์ถ•ํ‚ค ์•ˆ๋‚ด
Shift + /
โ‡ง + /

* ๋‹จ์ถ•ํ‚ค๋Š” ํ•œ๊ธ€/์˜๋ฌธ ๋Œ€์†Œ๋ฌธ์ž๋กœ ์ด์šฉ ๊ฐ€๋Šฅํ•˜๋ฉฐ, ํ‹ฐ์Šคํ† ๋ฆฌ ๊ธฐ๋ณธ ๋„๋ฉ”์ธ์—์„œ๋งŒ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค.