props

props 란

• properties 의 줄임말입니다. 우리가 어떠한 값을 컴포넌트에게 전달해줘야 할 때, props 를 사용합니다.

• Immutable Data 즉, 변하지 않는 데이터입니다. 상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 데이터를 넘겨줄 때 사용합니다.

• 부모 -> 자식 (0) / 자식 -> 부모 (X)
  

사용법

넘길 데이터

Home으로 boards데이터를 넘긴다
<Home boards={boards}/>

받는 데이터

 const boards = props.boards;
 
 //여러개의 데이터가 넘어올때는 구조분할 할당 방법으로 사용하는것이 좋음
 const {boards}=props;

사용해보기

부모에서 데이터를 받았다 가정(직집데이터 주입)하고 Home.js에게 props를 이용하여 값을 넘겨보자.

const HomePage = () => {


//Http요청(fetch,axios(다운))
    //임의의 데이터
    const [boards, setBoards] = useState([]);
    
     //빈배열이면 최초의 한번만 실행
    useEffect(() => {
        //다운로드 가정
        let data = [
            { id: 1, title: '제목1', contnet: '내용1' },
            { id: 2, title: '제목2', contnet: '내용2' },
            { id: 3, title: '제목3', contnet: '내용3' },
        ];

        setBoards([...data]);
        
    },[])
    
    return (
        <div>
            <Header />
            {/* 데이터를 Home으로 넘김 이걸 props 라고함 
            처음엔 빈데이터로 들어간(다운중)
            다운이 완료후 상태변화가 일어나 다시 return 다운 완료된 값이 들어감*/}
            <Home boards={boards}/>
            <Footer/>
        </div>
    );
};

export default HomePage;
            

Home.js

const Home = (props) => {
	const { boards } =props;
    
     return (
     	<div>
        	<h1>홈페이지입니다.</h1>
             {boards.map((boards) => <h3>제목: {boards.title} 내용: {boards.contnet}</h3>)}
        </div>
    );
};

-> 넘겨 주는 데이터에 제어 함수보내기

추가해준다
<Home boards={boards} setBoards={setBoards}/>

전체삭제하는 버튼을 추가하여 제어 함수를 활용해봄
 <button onClick={()=>setBoards([])}>전체삭제</button>

문제

const [number, setNumber] = useState(0); 추가 Home.js로 넘겨주고
홈:(번호)
번호 증가 버튼을 생성
버튼을 클릭하면 번호가 1씩증가하도록 만든다

const HomePage = () => {

   const [boards, setBoards] = useState([]);
   const [number, setNumber] = useState(0);
   
   //빈배열이면 최초의 한번만 실행
   useEffect(() => {
       //다운로드 가정
       let data = [
           { id: 1, title: '제목1', contnet: '내용1' },
           { id: 2, title: '제목2', contnet: '내용2' },
           { id: 3, title: '제목3', contnet: '내용3' },
       ];

       setBoards([...data]);
       
   },[])
   return (
       <div>
           <Header />
           <Home boards={boards} setBoards={setBoards} number={number} setNumber={setNumber}/>
           <Footer/>
       </div>
   );
};

Home.js

const Home = (props) => {

    const { boards, setBoards, number, setNumber } = props;
    return (
        <div>
            <h1>홈: {number} </h1>
            <button onClick={()=>setNumber(number+1)}>번호증가</button>
            <button onClick={()=>setBoards([])}>전체삭제</button>
            {boards.map((boards) => <h3>제목: {boards.title} 내용: {boards.contnet}</h3>)}
        </div>
    );
};