[ 코딩애플 ] React 리액트 기초 Part4

✏️ Props

- 부모 컴포넌트의 state를 props 문법을 이용해 자식 컴포넌트로 전송하면 자식도 사용 가능.

자식 → 부모 불가능!

다른 컴포넌트로 전송 불가능!

✏️ props로 부모 → 자식 state 전송하는 법
1. 자식 컴포넌트 사용하는 곳에 가서 <자식컴포넌트 작명 = { state 이름} />
2. 자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props. 작명 이용

💁‍♀️ 예시

function App (){

  let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']);
  
  return (
    <div>
      <Modal 글제목={글제목}></Modal>  <!-- < 자식컴포넌트 작명={state 이름} /> -->
    </div>
  )
}

// props 등록
function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[0] }</h4>  <!-- props.작명 -->
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

✏️ props는 함수 파라미터 문법과 똑같다!

function Modal(props){
  return (
    <div className="modal" style={{ background : props.color }}>
      <h4>{ props.글제목[0] }</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

- props.color 이런 식으로 구멍을 뚫어놓으면 이제 컴포넌트 사용할 때 <Modal color={'red'} /> 이러면 하늘색 모달창이 생성된다!

💁‍♀️ 클릭한 글제목이 모달창 안에 뜨게 하기!
1. html css로 미리 디자인
2. 현재 UI의 상태를 state로 만들기
3. state 종류에 따라 UI가 어떻게 보일지 작성

function App (){

  let [글제목, 글제목변경 ] = useState(['코트 추천', '우동 맛집 추천']);
  let [따봉, 따봉변경] = useState(0);
  let [modal, setModal] = useState(false);
  let [title, setTitle] = useState(0);
  
  return (
    <div>
      { 
        글제목.map(function(a, i){
          return (
          <div className="list">
            <h4 onClick={()=>{ setModal(true); setTitle(i); }}>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
          </div> )
        }) 
      }
    </div>
  )
}

function Modal(props){
  return (
    <div className="modal">
      <h4>{ props.글제목[props.title] }</h4>  <!-- title은 부모가 가진 state이므로 자식이 사용할 땐 props로 전송 -->
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

 

❗️ state를 자식 컴포넌트에 만들어버리면 props 전송이 필요한가?
 필요하지 않다! title같은 state도 자식컴포넌트 안에 만들면 편리하겠지만 지금 title이라는 state는 App도 쓰고 Modal도 쓰고 있다.
그렇게 다양한 컴포넌트에서 쓰이는 state는 컴포넌트들 중 최고로 높은 부모에게 만들어놔야한다. 

 

✏️ <input> 태그 사용하기

<input type="text"/>
<input type="range"/>
<input type="date"/>
<input type="number"/>
<textarea></textarea>
<select></select>

- 유저의 입력을 받을 수 있는 박스를 생성하고 싶으면 HTML에서는 위와 같은 태그 이용 가능

✏️ <input>에 뭔가 입력시 코드를 실행하려면
- onChange, onInput 이벤트 핸들러 부착

<input onChange={()=>{ 실행할 코드 }}/>

✏️ <input>에 입력한 값 가져오는 법
- e라는 파라미터 추가, e.target.value라고 적기.
- 이벤트 핸들러에 들어가는 함수에 저렇게 파라미터 e를 추가하면 e는 이벤트 객체.,라고 부르는데 현대 발생하는 이벤트와 관련된 유용한 기능들을 제공하는 일종의 변수다! ( 작명은 e 말고 자유롭게 가능)
- e.target: 현재 이벤트 발생한 곳 알려주기
- e.preventDefault(): 이벤트 기본 동작 막기
- e.stopPropagation(): 이벤트 버블링 막기 ( 예를 들면 좋아요 버튼 누를 때 모달창도 같이 떠버리는 버그 해결 가능)

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

✏️ 사용자가 input에 입력한 데이터 저장하기
- 사용자가 input에 입력한 데이터는 state 아니면 변수에 저장해서 사용하는 것이 일반적.

function App (){

  let [입력값, 입력값변경] = useState('');  // 따음표 2개는 빈문자를 뜻함
  
  return (
    <input onChange={(e)=>{ 
      입력값변경(e.target.value) 
      console.log(입력값)
    }} />
  )
}

 

- 참고! state 변경함수는 비동적(async)이게 처리되서 처리 속도가 약간 늦다. 그리고 js에선 늦게 처리되는 코드들을 잠깐 제치고 바로 다음줄을 실행한다. 따라서 console.log(입력값) 이게 먼저 실행된다.

 

✏️ 실습

💁‍♀️ 글 발행 기능

function App (){

  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  
  return (
    <div>
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
      <button onClick={()=>{ 
        let copy = [...글제목];  <!-- 버튼 누르면 일단 글제목 state 카피 -->
        copy.unshift(입력값);  <!-- unshift: array 자료 맨 앞에 자료 추가 -->
        글제목변경(copy)  <!-- state 변경 함수 사용 -->
      }}>글발행</button>
    </div>
  )
}

❗️참고: 원래 브라우저는 새로고침하면 html, js 파일을 다시 읽는다. 다시 읽게 되면 state나 변수같은 것들도 초기값으로 변경됨. 따라서 프론트엔드만 구현했을 경우 새로고침하면 사라진다.

💁‍♀️ 글마다 삭제버튼과 기능 만들기

function App (){

  let [글제목, 글제목변경] = useState(['남자코트추천', '강남우동맛집', '파이썬독학']);
  let [입력값, 입력값변경] = useState('');
  
  return ( 
    <div>
    { 
     글제목.map(function(a, i){
        return (
          <div className="list">
            <h4>{ 글제목[i] }</h4>
            <p>2월 18일 발행</p>
            <button onClick={()=>{ 
              let copy = [...글제목];  <!-- 버튼 누르면 글제목 state 복사 -->
              copy.splice(i, 1);  <!-- array자료에서 x번째 데이터 삭제 -->
              글제목변경(copy);
           }}>삭제</button>
          </div> 
        )
     }) 
    }  
  </div>
  )
}

 

---

본 포스팅은 << React 리액트 기초부터 쇼핑몰 프로젝트까지! >> 강의를 참고합니다.