Hello ReactWorld -2 map / props / input 태그 다루기

본 포스팅은 코딩애플님의 리팩트 강의를 수강한 후 참고하여 작성하였습니다.

react를 활용하여 동적으로 코드 만들기

• STEP1
  html, css로 미리 디자인을 완성
• STEP2
  UI의 현재 상태를 state로 저장
• STEP3
  state에 따라 UI가 어떻게 보일지 작성

function App() {

  //STEP2. 현재 상태를 저장한다.
  let [detailModal, setDetailModal] = useState(false);

  return (
    <div className="App">
      <div className="list">
        //SETP4. status를 변경할 이벤트를 작성한다.
        <h4 onClick={() => {
          detailModal == true ? setDetailModal(false) :  setDetailModal(true)}
          }> 모달창을 띄워보자 </h4>
        <p2>2023.11.14</p2>
      </div>
      {
        //STEP3. step에 따라서 UI를 보여줄지 말지를 판단한다.
        // 조건식 ? 참일때 코드 : 거짓일 때 실행할 코드
       detailModal == true ? <DetailModal/> : null
      }
    </div>

  );
}

//STEP1. UI를 만든다.
function DetailModal() {
  return(
    <div className='modal'>
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}

기존의 순수 js와는 다르게
Click 이벤트에따라 html요소를 새로 그려주고, 변경하고 하는것이 아닌
status로 UI의 상태를 관리한다.

리액트에서 반복문 쓰려면 map()

• map 함수의 역할
• 1. array자료의 길이반큼 반복문을 수행
• 2. 함수의 첫번째 파라미터는 array의 각각의 요소를 의미
• 3. 함수의 두번째 파라미터는 index를 의미
• 4. return 문으로 무언가를 작성하면 해당 영역에 array로 출력

[1,2,3].map(function(row) {
    console.log(row); // 1 2 3
});

function App() {

  let [store, change_store] = useState(['홍대 네네치킨','홍대 이자까야','홍대 육회집']);
  
  return (
    <div className="App">
      { store.map((row,index) => {
          return (
            <>
            <div className="list">
            <h4>{ row }</h4> 
            <p2> {index} 번째 글</p2>
            </div>
            </>
          );
        })

      }
    </div>

  );
}

화면에 랜더링 된 모습

이런식으로 각 요소의 index에 맞게 기능개발도 가능하다.

let [good_count, count_change] = useState([0,0,0]); 

function addGood(i) {
  let copy = [...good_count];
  copy[i] = copy[i]+1;
  count_change([...copy]);
}
 
store.map((row,index)=>{
  return (
    <>
    <div className="list" key = {index}>
    <h4>
    { row }
    <span onClick={() => addGood(index)}>
   👍좋아요
    </span>
    { good_count[index] }
    </h4> 
   <p2> {index} 번째 글</p2>
    </div>
    </>
  );
})

state를 array로 생성하여
각 항목별로 좋아요 갯수를 개별적으로 증가시켜주는 기능

부모요소 state 사용할 때는 props

말로만 듣던 녀석.. 드디더 만낫다..

• STEP1. 자식컴포넌트에 stats 전달
• SETP2. 자식컴포넌트는 parameter로 받아서 사용
• state 전달은 부모 -> 자식 전송은 가능, 자식-> 부모 전송은 불가능

{
// STEP1. 자식 컴포넌트에 state 전달
 detailModal == true ? <DetailModal 변수명={store}/> : null
}

// 서로 다른 영역
// 파라미터로 받아서 사용(관습상 props 라는 명칭을 자주 사용)
function DetailModal(props) {
  return(
    <div className='modal'>
        <h4>{props.변수명[0]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}

추가로 props 이거 계속 쓰기 귀찮으면

props 대신 {변수명}으로 선언시 조금 더 편리하게 코딩이 가능

function DetailModal({변수명}) {
  return(
    <div className='modal'>
        <h4>변수명[0]</h4>
        <p>날짜</p>
        <p>상세내용</p>
    </div>
  );
}

input 태그 다루기

• input에 입력된 값을 저장하려면 보통 state에 저장

let [inputText,setInputText] = useState('');

<input onChange={(e) => {
  console.log(e.target.value);
  setInputText(e.target.value);
  }}>
</input>