<div id="readability-page-1" class="page"><div><h2 id="ui-제작-패턴-props를-응용한-상세페이지-만들기">(UI 제작 패턴) props를 응용한 상세페이지 만들기</h2>
패턴 그냥 암기
UI 만드는 법: 
1. UI와 관련된 중요 정보들 state로 저장해놓고 
2. state에 따라서 UI가 수정되게 만들면 됩니다.
Q. 제목을 누를 때, 각각 다른 모달 뜨게 
결국 이것도 state를 관리해줘야한다.
작동하는 이벤트를 만들고 클릭시 state를 이에 맞게끔 변경
=&gt; 하드코딩
<pre><code> /* &lt;button onClick={ ()=&gt;{누른제목변경(0)}}&gt;버튼1&lt;/button&gt;
 &lt;button onClick={ ()=&gt;{누른제목변경(1)}}&gt;버튼2&lt;/button&gt;
 &lt;button onClick={ ()=&gt;{}}&gt;버튼3&lt;/button&gt; }</code></pre>
그렇다면 반복문(for문 아니고 map)안에 어떻게 반영하느냐
map 함수의 두번째 파라미터로 i를 받는다.
아주 유영한 파라미터 이거 자동으올 인덱스로 활용 가능!
<pre><code>{
 글제목.map((a, i)=&gt;{
 return(
 &lt;div className="list"&gt;
 &lt;h3 onClick={ ()=&gt;{누른제목변경(i)}}&gt;{ a }&lt;span onClick={ ()=&gt;{ 따봉변경(따봉 + 1)} }&gt;👕&lt;/span&gt; {따봉}&lt;/h3&gt;
 &lt;p&gt;2월 17일 발행&lt;/p&gt;
 &lt;hr /&gt;
 &lt;/div&gt;
 )
 })
 }</code></pre>
=&gt; map 함수에대해 정확히 알고 있는건 아니였지만 그래도 비슷한 기능을 함수들이 많이 있다보니 바로 받아들여졌다.
=&gt; 리액트의 장점이자 단점은 부모 페이지에서 많은게 일어난다는 점인데 아마 나중에 분리하는 걸 배우지 않을까 싶고, 한 페이지에서 일어나는 걸 배우고 있다보니 데이터의 변환에대해서 좀 이해하기가 쉽다.</div></div>

2taesung.log

Taesung Lee

(UI 제작 패턴) props를 응용한 상세페이지 만들기
패턴 그냥 암기
UI 만드는 법:
UI와 관련된 중요 정보들 state로 저장해놓고
state에 따라서 UI가 수정되게 만들면 됩니다.
Q. 제목을 누를 때, 각각 다른 모달 뜨게 
결국 이것도 state를 관리해줘야한다.
작동하는 이벤트를 만들고 클릭시 state를 이에 맞게끔 변경
=> 하드코딩
 /* <button onClick={ ()=>{누른제목변경(0)}}>버튼1</button>
 <button onClick={ ()=>{누른제목변경(1)}}>버튼2</button>
 <button onClick={ ()=>{}}>버튼3</button> }
그렇다면 반복문(for문 아니고 map)안에 어떻게 반영하느냐
map 함수의 두번째 파라미터로 i를 받는다.
아주 유영한 파라미터 이거 자동으올 인덱스로 활용 가능!
{
 글제목.map((a, i)=>{
 return(
 <div className="list">
 <h3 onClick={ ()=>{누른제목변경(i)}}>{ a }{ 따봉변경(따봉 + 1)} }>👕 {따봉}</h3>
 2월 17일 발행
 <hr />
 </div>
 )
 })
 }
=> map 함수에대해 정확히 알고 있는건 아니였지만 그래도 비슷한 기능을 함수들이 많이 있다보니 바로 받아들여졌다.
=> 리액트의 장점이자 단점은 부모 페이지에서 많은게 일어난다는 점인데 아마 나중에 분리하는 걸 배우지 않을까 싶고, 한 페이지에서 일어나는 걸 배우고 있다보니 데이터의 변환에대해서 좀 이해하기가 쉽다.

[React] (UI 제작 패턴) props를 응용한 상세페이지 만들기

댓글