[코딩애플;React]props

 

1.Props

:자식 컴포넌트가 부모 컴포넌트에 있던 state를 쓰고 싶으면 props를 이용하여 사용가능

-부모-자식간의 관계인 경우 사용가능!!

-함수 블록 안에서 선언한 변수는 밖에 나오면 사용 불가함 여기서도 마찬가지

 

1)사용하는 법

-자식 컴포넌트 사용하는 곳에 <자식 컴포넌트 작명={state이름}>

   {

        modal == true ? <Modal 글제목 = {글제목}></Modal>/Modal> : null

      }

 

-자식 컴포넌트 만드는 function으로 가서 props라는 파라미터 등록 후 props.작명 사용

let Modal = (props) => {

  return (    

  <div className="modal">

    <h4>{props.글제목[0]}</h4>

    <p>날짜</p>

    <p>상세내용</p>

    <button>글수정</button>

  </div>

  )

}

 

-props는 여러개를 만들어서 무한히 전송이 가능하고 state뿐 아니라 변수명, 텍스트,함수도 가능함.

 

📚숙제 1: 배경색 넣어보기

-function App()안에(부모 컴포넌트 안에) state선언

let [bg, setBg] =useState(['skyblue','yellow','pink'])

 

-자식 컴포넌트가 보여지는 부분에 props 작명

{

        modal == true ? <Modal 글제목 = {글제목} bg = {bg} ></Modal> : null

      }

 

-자식 컴포넌트 작성한 함수에 props사용하기

let Modal = (props) => {

  return (    

  <div className="modal" style={{background: props.bg[0]}}>

    <h4>{props.글제목[0]}</h4>

    <p>날짜</p>

    <p>상세내용</p>

 

  </div>

  )

}

 

📚숙제 2. 버튼 클릭 후 글제목 변경되도록 만들어보기

-자식 컴포넌트 보여지는 부분에 props에 함수를 넣어서 작명

     {

        modal == true ? <Modal 글제목 = {글제목} bg = {bg} 글제목변경={()=>{

          let copy = [...글제목];

          copy[0]='여자 코트 추천'

          글제목변경(copy)

        }}></Modal> : null

      }

 

-자식컴포넌트 함수 안에 클릭기능과 props 사용.

let Modal = (props) => {

  return (    

  <div className="modal" style={{background: props.bg[0]}}>

    <h4>{props.글제목[0]}</h4>

    <p>날짜</p>

    <p>상세내용</p>

    <button onClick={props.글제목변경}>글수정</button>

  </div>

  )

}

 

📚숙제3. 모달이 글제목 인덱스에 따라 바뀌도록 하기(첫번째 클릭하면 첫번째 글제목 뜨도록)

-우선 타이틀 값이 들어갈 state선언

(모달 창에만 사용하는거라면 Modal()안에 넣어주고 전체적으로 사용해야하면 App()에 넣어줌)

  let [title,setTitle] =useState(0);

 

2.자식 컴포넌트 안에  props넣어주기

let Modal = (props) => {

  return (    

  <div className="modal" style={{background: props.bg[0]}}>

    <h4>{props.글제목[props.title]}</h4>

    <p>날짜</p>

    <p>상세내용</p>

    <button>글수정</button>

  </div>

  )

}

 

3.글제목이 띄워지는 부분에 함수적용해서  title번호가 변경되도록 기능 추가해줌.

글제목.map(function(a,i){

            return(

              <div className="list" key={i}>

              <h4  onClick={()=>{setModal(!modal); setTitle(i)}}>{글제목[i]}<span onClick={()=>{

                let copy = [...따봉];

                copy[i] = copy[i]+1;

                따봉변경(copy)

              }}>👍</span>{따봉[i]}</h4>

              <p>2월 17일 발행</p>

              <button onClick={()=>{

                let copy = [...글제목];

                copy[0]='여자 코트 추천'

                글제목변경(copy)

              }}>글제목 변경하기</button>

              <hr/>

            </div>

            )

          })