React Ver - westagram ์ค‘๊ฐ„ ํ›„๊ธฐ๐Ÿคฉ

solmiiยท2020๋…„ 6์›” 14์ผ
0

Project

๋ชฉ๋ก ๋ณด๊ธฐ
5/14

WeCode 3์ฃผ์ฐจ๋ถ€ํ„ฐ๋Š” ๊ธฐ์กด์— html, css, javascript๋กœ ๋งŒ๋“ค์—ˆ๋˜ ์‚ฌ์ดํŠธ๋ฅผ react๋กœ ๋ฐ”๊พธ๋Š” ๊ณผ์ •์ด ์ง„ํ–‰๋˜์—ˆ๋‹ค!


ํ•˜๋‹ค๊ฐ€ ์–ด๋ ค์› ๋˜ ๋ถ€๋ถ„

ย ย  Login page ย ย 

changeHandler = (e) => {
  this.setState({
    userId: e.target.value,
    userPw: e.target.value,
  });
};
<input className='login_input' onChange={this.changeHandler} type='text' placeholder='์ „ํ™”๋ฒˆํ˜ธ, ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋˜๋Š” ์ด๋ฉ”์ผ' />
<input className='login_input' onChange={this.changeHandler} type='password' placeholder='๋น„๋ฐ€๋ฒˆํ˜ธ' />

์ด๋ ‡๊ฒŒ ์ž‘์„ฑํ–ˆ์—ˆ๋Š”๋ฐ....!

์•ˆ๋˜๋Š” ์ด์œ ๊ฐ€ ์žˆ์—ˆ๋‹คใ… ใ… ใ…  changeHandler ๋ผ๋Š” ๊ณตํ†ต์˜ event๋ฅผ ID input๊ณผ PW input ์—์„œ ๋ชจ๋‘ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ์œผ๋‹ˆ๊นŒใ… ใ… 

ํ•ด๋‹น state ์˜ userId, userPw ๊ฐ€ ๊ฐ€๋ฅดํ‚ค๋Š” e.target ์ด ๊ฐ™์€๊ฑฐ์ธ๊ฒƒ....!

์•„ ๋˜๊ฒŒ ๊ฐ„๋‹จํ•˜๊ฒŒ ํ’€๋ ธ๋‹คใ… ใ… ใ… ใ…  ์ด๊ฑธ ๋ชฐ๋ž๋„ค๐Ÿ˜ญ๐Ÿ˜ญ

changeIdHandler = (e) => {
    this.setState({
      userId: e.target.value,
    });
  };

  changePwHandler = (e) => {
    this.setState({
      userPw: e.target.value,
    });
  };

<input className='login_input' onChange={this.changeIdHandler} type='text' placeholder='์ „ํ™”๋ฒˆํ˜ธ, ์‚ฌ์šฉ์ž ์ด๋ฆ„ ๋˜๋Š” ์ด๋ฉ”์ผ' />
<input className='login_input' onChange={this.changePwHandler} type='password' placeholder='๋น„๋ฐ€๋ฒˆํ˜ธ' />

์ด๋ ‡๊ฒŒ ID event ์™€ PW event ๋ฅผ ์ชผ๊ฐœ์คฌ๋‹ค!

์ž‘๋™ ์ž˜ํ•จ.....๐Ÿ‘

ย ย  Main page - ๊ฒŒ์‹œ ๋ˆ„๋ฅด๋ฉด ๋Œ“๊ธ€ ์—…๋กœ๋“œ ย ย 

handleAddForm = () => {
  if (this.state.userInput) {
    this.setState({ commentArr: this.state.commentArr.concat(this.state.userInput) });
  }
};

์ผ๋‹จ ํ•จ์ˆ˜ ๋จผ์ € ์„ ์–ธํ•˜๊ณ !

if (this.state.userInput) ๋ผ๋Š” ์กฐ๊ฑด์„ ๊ฑธ์–ด์ค€๋‹ค!
๊ฑธ์–ด์ค€ ์ด์œ ๋Š” input ์— ์•„๋ฌด ๊ฐ’๋„ ์•ˆ๋“ค์–ด์™”์„ ๋•Œ ๋Œ“๊ธ€์ด ์˜ฌ๋ผ๊ฐ€๋Š”๊ฑธ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ!!

๊ทธ๋‹ด์— form ์„ setState() ํ•ด์ฃผ๋Š”๋ฐ, this.state.userInput ์„ this.state.commentArr ์— concat ํ•ด์ค€๋‹ค!!

์—ฌ๊ธฐ์„œ userInput ์ด๋ž€??
input ์ฐฝ์—์„œ ๋ฐ›์•„์˜จ ๋ฐ์ดํ„ฐ์ž„!! (user๊ฐ€ ์ž…๋ ฅํ•œ s๋Œ“๊ธ€ ๋‚ด์šฉ!)

<button> ์„ onClick ํ• ๋•Œ๋งˆ๋‹ค ์‹คํ–‰๋˜๋Š” ์ด๋ฒคํŠธ๋กœ ๋งŒ๋“ค์—ˆ๊ณ , ์ฒ˜์Œ์—” ๋นˆ ๋ฐฐ์—ด์ด์—ˆ์ง€๋งŒ ํด๋ฆญํ•  ๋•Œ ๋งˆ๋‹ค userInput ์˜ ๊ฐ’์„ commentArr ๋ฐฐ์—ด์ด๋ž‘ ํ•ฉ์ณ์„œ ๋ฐ˜ํ™˜ํ•ด์ค€๋‹ค. ( concat ๋ฉ”์„œ๋“œ๋ฅผ ํ†ตํ•ด์„œ!!)

concat ์€ ๊ธฐ๋ณธ ๋ฐฐ์—ด๊ณผ ์ธ์ž๋กœ ์ฃผ์–ด์ง„ ๋ฐฐ์—ด/๊ฐ’์„ ํ•ฉ์ณ์„œ ์ƒˆ ๋ฐฐ์—ด์„ ๋ฐ˜ํ™˜ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ž„!!
์ฒ˜์Œ์— ๊ธฐ๋ณธ ๋ฐฐ์—ด์€ ๋นˆ ๋ฐฐ์—ด์ด๊ณ , ์ธ์ž๋กœ ๋“ค์–ด์˜จ ๊ฐ’์€ userInput ๊ฐ’!
๊ทธ๋Ÿผ ๋‘˜์„ [ ] + "userInput" ํ•ฉ์ณ์„œ [ "userInput" ] ๊ฐ€ ๋ฐ˜ํ™˜!!!

๋งŒ์•ฝ ๋‹ค์Œ์— ๋ฒ„ํŠผ์„ ๋˜ ํด๋ฆญํ•˜๋ฉด ์–ด์ฐŒ ๋ ๊นŒ??
[ "userInput" ] + [ "userInput2" ] ๊ฐ€ ๋˜์–ด์„œ [ "userInput", "userInput2" ] ์ด ๋œ๋‹ค!

๊ทธ๋ฆฌ๊ณ  render() { return( ์•ˆ์—์„œ <div className='comments'> </div> ์•ˆ์— ์•„๋ž˜ ์ฝ”๋“œ๋ฅผ ๋„ฃ์–ด์ฃผ์—ˆ๋‹ค!!

{this.state.form.map((userInput, idx) => (
	<CommentForm key={idx} name='Wecoder' comment={userInput} />
))}

์ด๊ฑด ์†”์งํžˆ ์Šนํ˜„๋‹˜์ด ์ณ์ฃผ์‹  ์ฝ”๋“œ๊ธด ํ•œ๋ฐ....ใ…‹.....ใ…‹ใ…‹ใ…‹ใ…‹.......

this.state.commentArr ์— ๋Œ€ํ•ด map ์„ ๋Œ๋ฆฌ๋Š”๋ฐ, map์— ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๋„˜๊ฒจ์ค„๋•Œ ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ userInput ์„ ๊ฐ™์ด ์ „๋‹ฌํ•ด์ค€๋‹ค! ( idx ๋Š” ๊ทธ๋ƒฅ key ๊ฐ’์— ์ง€์ •ํ•˜๋ ค๊ณ  ๋„˜๊ธด ์ธ์ž๋ผ์„œ ์ž์„ธํ•œ ์„ค๋ช…์€ ์ƒ๋žต...! ์ด key ๊ฐ’์€ ๋‚˜์ค‘์— ๋Œ“๊ธ€ ์‚ญ์ œ๋‚˜ ๊ธฐํƒ€ ๋“ฑ๋“ฑ์—์„œ ์š”๊ธดํ•˜๊ฒŒ ์“ธ ์˜ˆ์ •์ž…๋‹ˆ๋‹น)

map ๋ฉ”์„œ๋“œ ์ž์ฒด๊ฐ€ , ๋ฐฐ์—ด์˜ ์š”์†Œ๋“คํ•œํ…Œ ํ•จ์ˆ˜๋ฅผ ์ซ™ ์ ์šฉํ•˜๊ณ  ๋ฐ˜ํ™˜๊นŒ์ง€ ํ•˜๋Š” ๋ฉ”์„œ๋“œ์ด๊ธฐ ๋•Œ๋ฌธ์—,

<CommentForm key={idx} name='Wecoder' comment={userInput} />

์—์„œ key ๊ฐ’๊ณผ comment ๊ฐ’์— ์ธ์ž๋กœ ์ „๋‹ฌ๋ฐ›์€ ์š”์†Œ(userInput)๊ณผ index ์œ„์น˜ ๊ฐ’์„ ์ ์šฉํ•œ ํ›„ <CommentForm/> ์ด๋ผ๋Š” ์ปดํฌ๋„ŒํŠธ ์ž์ฒด๋ฅผ ๋ฐ˜ํ™˜!!!

ย ย  Main page - Enter ๋ˆ„๋ฅด๋ฉด ๋Œ“๊ธ€ ์—…๋กœ๋“œ ย ย 

handlePressEnter = (e) => {
    if (e.key === 'Enter') {
      this.handleAddForm();
    }
  };

handlePressEnter ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , ์œ„์˜ handleAddForm ์ด๋ฒคํŠธ๋ฅผ ๋„ฃ์–ด์คฌ๋‹ค!

key === 'Enter' ๋ถ€๋ถ„์ด ํŠน์ดํ•œ๋ฐ, ์ฒ˜์Œ์—” JS์ฒ˜๋Ÿผ e.keyCode === 13 ์„ ๋„ฃ์—ˆ๋Š”๋ฐ ์•ˆ ๋จน๋Š”๊ฒƒ....ใ… ใ… !

๊ฒ€์ƒ‰ํ•ด๋ณด๋‹ˆ react์—์„œ๋Š” e.key == 'Enter' ๋ฅผ ์ฃผ๋กœ ์‚ฌ์šฉํ•œ๋‹ค๊ณ ...!

e.key ๋กœ ๋ฐ”๊พธ์ž๋งˆ์ž ๋ฐ”๋กœ ์ž˜ ์ ์šฉ๋œ๋‹ค!!!!

ย ย  Main page - ๋Œ“๊ธ€ ์—…๋กœ๋“œ ํ›„ input์ฐฝ์— ๋‚จ์•„์žˆ๋Š” ๊ธ€ ์‚ญ์ œ ย ย 

handleAddForm ์ด๋ฒคํŠธ์˜ setState ๊ฐ’์— userInput: '' ์„ ์ถ”๊ฐ€๋กœ ๋„ฃ์–ด์คฌ๋‹ค!

userInput ๊ฐ’์„ commentArr ์ด๋ž‘ concat ์œผ๋กœ ํ•ฉ์นœ ์ดํ›„์—๋Š” userInput์˜ ๋‚ด์šฉ์„ '' ๋กœ ์ง€์ •ํ•ด์ค˜์„œ ๋‚ด์šฉ์ด ์ง€์›Œ์ง„ ๊ฒƒ ์ฒ˜๋Ÿผ ๋ณด์ด๋„๋ก!

๊ทผ๋ฐ ๋‚ด์šฉ์ด ์•ˆ์ง€์›Œ์ ธ์„œ ๋ฉ˜๋ถ•ใ… ใ… ใ… ใ… ใ… 

๋‹ค์Œ๋‚ , react ์„ธ์…˜์—์„œ ๋“ค์€๊ฑด๋ฐ ํ•ด๋‹น input์— ( ์ง„์งœ <input /> ํƒœ๊ทธ์— )

value ๊ฐ’์„ ์ง€์ •ํ•ด์ค˜์„œ, setState ๋์„ ๋•Œ, ๋ณ€๊ฒฝ๋œ state ๊ฐ’์œผ๋กœ input์ฐฝ์˜ ๋‚ด์šฉ์ด ๋ฐ”๋กœ๋ฐ”๋กœ ๋ฐ”๋€Œ๊ฒŒ ํ•ด์ฃผ๋ฉด ๋œ๋‹ค๊ณ  ํ•œ๋‹ค.

๊ทธ๋Ÿผ.... input ์ฐฝ์— ์ด ํƒœ๊ทธ๋งŒ ๋„ฃ์–ด์ฃผ๋ฉด ๋˜๋Š”๊ฑฐ ์•„๋ƒ?

<input value={this.state.userInput} ์–ด์ฉŒ๊ตฌ />

๋ ์šฉ~~~ ๋ฐ”๋กœ ๋จ๐Ÿ˜‚๐Ÿ‘

์ด๋ ‡๊ฒŒ ๋™์ž‘ํ•จ!


์—ฌ๊ธฐ๊นŒ์ง€ ํ•„์ˆ˜(?) ๊ณผ์ œ ๋~!
ํ•˜์ง€๋งŒ ์—ฌ๊ธฐ์„œ ๋ฉˆ์ถ”๋ฉด NOJAM~~
์ด ์™ธ์—๋„ โค๏ธ ๋ฒ„ํŠผ, ๋Œ“๊ธ€ ์ˆ˜ ์นด์šดํŠธ, ํด๋ฆญ์‹œ ๊ฒ€์ƒ‰์ฐฝ ๋ฐ”๋€Œ๋Š”๊ฑฐ ๋“ฑ๋“ฑ ๊ตฌํ˜„ํ–ˆ๋‹ค! ์ด๊ฑด ๋‹ค์Œ๊ธ€์— ๊ณ„์†!

์ถ”๊ฐ€๋กœ ๋” ๊ตฌํ˜„ํ•˜๊ณ  ์‹ถ์€๊ฑด,

  1. ๋Œ“๊ธ€ ๋ชจ๋‘๋ณด๊ธฐ ๋ฒ„ํŠผ ํด๋ฆญ ์‹œ ๋Œ“๊ธ€ ์ฐฝ ๋‹ค ๋ณด์ด๋Š”๊ฑฐ(์ด๊ฑด class ๋ณ€๊ฒฝํ•ด์„œ ์‰ฝ๊ฒŒ ์ฒ˜๋ฆฌ ๊ฐ€๋Šฅํ• ๋“ฏ)
  2. ๋กœ๊ทธ์ธ ํŽ˜์ด์ง€์˜ ํšŒ์›๊ฐ€์ž… ์ฐฝ
  3. main Nav_bar ์•„์ด์ฝ˜ ํด๋ฆญ์‹œ ๊ฒ€์€์ƒ‰์œผ๋กœ ๋ณ€ํ•˜๋Š”๊ฑฐ!

์–˜๋„ค๋Š” ๊ผญ ํ•ด์•ผ์ง€~๋Š” ์•„๋‹ˆ๊ณ ...์‹œ๊ฐ„ ๋‚˜๋ฉด?? ์ผ๋‹จ ๋ฐ€๋ฆฐ ๋ธ”๋กœ๊ทธ๋ถ€ํ„ฐใ…Žใ…Žใ…Žใ…Ž

profile
ํ•˜๋ฃจ๋Š” ์น˜์—ดํ•˜๊ฒŒ ์ธ์ƒ์€ ์—ฌ์œ ๋กญ๊ฒŒ

0๊ฐœ์˜ ๋Œ“๊ธ€