<div id="readability-page-1" class="page"><div><h2 id="노란색-warning은-에러는-아님">노란색 warning은 에러는 아님</h2>
노란색 warning은 -eslint가 잘못된 코딩 습관 같은거를 체크해줌
예, 변수 만들고 안썼어요!
보기 싫으면 가장 상단에 
<pre><code>/*eslint-disable*/</code></pre>
=&gt;와 꿀팁
<h2 id="좋아요-버튼">좋아요 버튼</h2>
<pre><code> &lt;div className="list"&gt;
 &lt;h3&gt;{ 글제목[0] }&lt;span onClick={ ()=&gt;{} }&gt;👕&lt;/span&gt; 0 &lt;/h3&gt;
 &lt;p&gt;2월 17일 발행&lt;/p&gt;
 &lt;hr /&gt;
 &lt;/div&gt;</code></pre>
onClick={클릭될 때 실행할 함수} 
onClick={()=&gt;{실행할 내용}}
=&gt; 예시로 보여줬지만 " 1+1 ", { 1+1 } 
=&gt; 이런건 안된다.
=&gt; ()=&gt;{실행할 내용} 요것은 es6의 화살표 함수
그럼 이 버튼을 누르면 h3안의 0에 영향을 주고 싶다.
<pre><code>let [따봉, 따봉변경] = useState(0)

&lt;h3&gt;{ 글제목[0] }&lt;span onClick={ ()=&gt;{ 따봉변경('rse')} }&gt;👕&lt;/span&gt; {따봉} &lt;/h3&gt;</code></pre>
=&gt; 따봉 변경 함수를 활용해주면 된다. 
=&gt; 이렇게 하면 'rse'로 따봉 변수가 아예 바뀌고
<pre><code>&lt;h3&gt;{ 글제목[0] }&lt;span onClick={ ()=&gt;{ 따봉변경(따봉+1)} }&gt;👕&lt;/span&gt; {따봉} &lt;/h3&gt;</code></pre>
=&gt; 요래 해주면 따봉 변수에 +1이 된다. 
=&gt; 또 이런식으로 state를 바꿔줘야 재 렌더링이 발생한다.
<h2 id="과제">과제</h2>
글 제목을 변경해봐라
=&gt; 당연히 쉽게 
<pre><code>&lt;button onClick={ ()=&gt;{ 글제목[0] = '여자 코트 추천'; console.log(글제목[0]) } }&gt;버튼&lt;/button&gt;</code></pre>
=&gt; 이렇게 생각했는데 안된다 ... 
=&gt; console로는 잘 바뀐채로 나오는데 
=&gt; 밑에 글 제목으로는 안된다 
=&gt; 알고보니 그 이유는 이렇게 바꿔주는건 
=&gt; 글제목에 들어있는 전체를 바꿔주어야한다. 
=&gt; 고로 [] 리스트 형식으로 들어가 있기 때문에 [] 형식 전체를 바꿔줘야함
안그러면
<pre><code>&lt;button onClick={ ()=&gt;{ 글제목변경(글제목[0] = '여자코트') } }&gt;버튼&lt;/button&gt; &lt;div className="list"&gt;</code></pre>
<img src="https://media.vlpt.us/images/2taesung/post/01d8eb4d-e354-45fd-b118-4cffedfad3ce/image.png">
=&gt; 이런 문제가 발생한다 
=&gt; 제대로 형식을 못 받아들이는듯 ...</div></div>

2taesung.log

Taesung Lee

노란색 warning은 에러는 아님
노란색 warning은 -eslint가 잘못된 코딩 습관 같은거를 체크해줌
예, 변수 만들고 안썼어요!
보기 싫으면 가장 상단에 
/*eslint-disable*/
=>와 꿀팁
좋아요 버튼
 <div className="list">
 <h3>{ 글제목[0] }{} }>👕 0 </h3>
 2월 17일 발행
 <hr />
 </div>
onClick={클릭될 때 실행할 함수}
onClick={()=>{실행할 내용}}
=> 예시로 보여줬지만 " 1+1 ", { 1+1 }
=> 이런건 안된다.
=> ()=>{실행할 내용} 요것은 es6의 화살표 함수
그럼 이 버튼을 누르면 h3안의 0에 영향을 주고 싶다.
let [따봉, 따봉변경] = useState(0)
<h3>{ 글제목[0] }{ 따봉변경('rse')} }>👕 {따봉} </h3>
=> 따봉 변경 함수를 활용해주면 된다.
=> 이렇게 하면 'rse'로 따봉 변수가 아예 바뀌고
<h3>{ 글제목[0] }{ 따봉변경(따봉+1)} }>👕 {따봉} </h3>
=> 요래 해주면 따봉 변수에 +1이 된다.
=> 또 이런식으로 state를 바꿔줘야 재 렌더링이 발생한다.
과제
글 제목을 변경해봐라
=> 당연히 쉽게 
<button onClick={ ()=>{ 글제목[0] = '여자 코트 추천'; console.log(글제목[0]) } }>버튼</button>
=> 이렇게 생각했는데 안된다 ...
=> console로는 잘 바뀐채로 나오는데 
=> 밑에 글 제목으로는 안된다 
=> 알고보니 그 이유는 이렇게 바꿔주는건 
=> 글제목에 들어있는 전체를 바꿔주어야한다.
=> 고로 [] 리스트 형식으로 들어가 있기 때문에 [] 형식 전체를 바꿔줘야함
안그러면
<button onClick={ ()=>{ 글제목변경(글제목[0] = '여자코트') } }>버튼</button> <div className="list">
=> 이런 문제가 발생한다 
=> 제대로 형식을 못 받아들이는듯 ...

[React] 버튼에 기능개발을 해보자 & 리액트 state변경하는 법

댓글