코린이의 REACT 기본문법 복습 끄적끄적

REACT 기본문법 복습 끄적끄적

• 반복문 쓰는 법

{반복할데이터.map(()=>{return})};

예시

var 어레이 = [2,3,4];
어레이.map(function(a){
	return a *2
    });

블로그 좋아요 기능 만들어보기

function App(){
  let [post, setPost] = useState(['직구 사이트 추천', '서울 우동 맛집', '리액트 독학'])
  let [like, setLike] = useState([0,0,0]);
  let [moda1, setModal1] = useState(0);
  function switchLike(a){
  	var newArray1 = [...like];
  	newArray[1] = newArray[a] + 1;
  	setLike(newArray1)
  }
  return (
  <div className="App">
      <div className='black-nav'>
          개발LOG
      </div>
        {
          post.map((text, i)=>{
            return (
              <div className='list' key={i}>
              <h3 onClick={()=>{setModal1(i)}}>{text}<span onClick={()=>{
                switchLike(i)
              }}>👍</span>{like[i]}</h3>
              <p>4월 17일 발행</p>
              <hr/>
            </div>
            )
          })

        }
    <div>
 );
}

• input쓰는법
  

input 사용 예시

let [inputs, setInputs] = useState(''); //state에 빈값을 초기값으로 넣어줌
<input onChange={(e)=>{setInputs(e.target.value)}}/> // e.target.value는 현재 써넣는 입력값

블로그에 글 추가 기능

      // 기본적인 App () 과 return 제외하고 필요한 부분만 썼습니다
let [post, setPost] = useState(['직구 사이트 추천', '서울 우동 맛집', '리액트 독학']);
let [inputs, setInputs] = useState('');
<div className='publish'>
        <input onChange={(e)=>{setInputs(e.target.value)}}/>
        <button onClick={()=>{
          var newPost = [...post];
          newPost.unshift(inputs)
          setPost(newPost);
        }}>저장</button>
      </div>