[React] 리액트 버튼 기능개발

좋아요 버튼을 클릭 하면 카운트가 1씩 늘어나도록 ui , 기능을 추가할 것이다.

function App() {
  let [글제목, 글제목변경] = useState( ['남자 코트 추천 ', '2', '3'] );
  let [따봉, 따봉변경] = useState( 0 )
  let posts = '강남 고기 맛집';
  
  function 제목변경() {
    var newArray =[...글제목] ;
    newArray[0] = "맛집추천"
    글제목변경(newArray)
  }
  
  return (
    <div className="App">
      <div className="black-nav">
        <div style={{ fontSize: '16px' }}> 개발 Blog </div>
      </div>
      <div className="list">
        <h3> {글제목[0]} <span onClick={() => { 따봉변경( 따봉 + 1 ) }}> ❤️ </span> {따봉} </h3>
        <p>2월 17일 발행 </p>
        <span onClick={제목변경}>변경버튼</span>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[1]}</h3>
        <p>2월 17일 발행 </p>
        <hr />
      </div>
      <div className="list">
        <h3>{글제목[2]}</h3>
        <p>2월 17일 발행 </p>
        <hr />
      </div>
      
      <div className="modal">
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      
    </div>
  );
}

onClick 할 때마다 1씩 증가하도록 기능을 추가하였다.

변경 버튼을 클릭했을 때 제목변경 이라는 함수를 실행하게 되어 제목이 입력한 값의 "맛집추천” 으로 바뀌게 해보았다.

state는 직접 변경을 할 수 없다.

복사를 하는방법의 포인트는 es6문법인 deep copy 를 해서 수정해야 한다.

deepCopy

서로 값 공유가 일어나지 않고 새로운 복사본을 생성하는 방법이다.

    var newArray =[...글제목] 

불변 인프라

리액트의 state 의 모든 데이터는 immutable data 의 원칙을 따라야 한다.

불변 인프라(immutable infrastructure) 는 서버가 배포된 이후 절대 변경되지 않는 형태의 인프라 패러다임이다. 만약 어떤 사항을 업데이트하거나 수정, 변경해야 할 경우, 공용 이미지에 적절한 수정을 한 새 서버가 프로비저닝(provision1)되어 기존 서버를 대체한다. 새 서버는 검증이 완료되면 서비스에 투입되고 기존 서버는 더 이상 사용하지 않게 된다.