Props

카테고리 없음

Props

김딸기* 2024. 12. 2. 07:27

props: 부모컴포넌트로부터 자식 컴포넌트에 데이터를 보내는 방식

Props란?

Props는 컴포넌트 간 데이터를 전달하는 데 사용되는 객체이다.
부모 컴포넌트가 자식 컴포넌트에 데이터를 내려주는 역할을 한다.
자식 컴포넌트는 전달받은 Props를 읽기 전용으로 사용한다.

Props의 특징

단방향 데이터 흐름
- 데이터는 부모 → 자식 방향으로만 전달된다.
읽기 전용
- Props는 자식 컴포넌트에서 수정할 수 없다.
유연성
- 문자열, 숫자, 배열, 객체, 함수 등 모든 데이터를 전달할 수 있다.

function Btn({ text }) { ->컴포넌트로부터 내용(오브젝트) 전달받아 사용

return (

<button

style={{

backgroundColor: "tomato",

color: "white",

padding: "10px 20px",

margin: "10px",

border: 0,

borderRadius: "14px",

}}

{text} ->버튼의 내용물

</button>

);

}

//App 함수(컴포넌트)

//App 함수(컴포넌트): root div를 그려주는 역할+ 2개의 컴포넌트를 렌더링함

//STATE를 통해 변환기 2개중 하나를 선택

function App() {

return (

<div>

</div>

); //props로 text를 전달함->버튼들은 app컴포넌트에 의해 설정됨

}

//컴포넌트는 내부에 다른컴포넌트를 불러올 수 있다

//MinutesToHours 함수를 렌더링해 내부 요소들 사용 가능

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

</script>

</html>

-스타일 컴포넌트를 생성해 여러번 이용 가능

버튼요소에 이벤트 리스너 추가하기

=>버튼 클릭시 내용 글자 변경

function Btn({ text, onClick }) {

//2개의 props사용

return (

<button

onClick={onClick} //버튼 클릭시 내용 변경됨

style={{

backgroundColor: "tomato",

color: "white",

padding: "10px 20px",

margin: "10px",

border: 0,

borderRadius: "14px",

}}

{text}

</button>

);

}

//App 함수(컴포넌트)

//App 함수(컴포넌트): root div를 그려주는 역할+ 2개의 컴포넌트를 렌더링함

//STATE를 통해 변환기 2개중 하나를 선택

function App() {

const [value, setValue] = React.useState("save change");

const changeValue = () => setValue("changed");

//위 이벤트 리스너는 HTML태그에 포함시킬 수 없음->버튼 태그를 위한 이벤트리스너 아님

//Btn의 요소에 포함시켜야지만 적용됨->props를 가져와 적용시켜야 함

return (

<div>

</div>

); //props로 text를 전달함->버튼들은 app컴포넌트에 의해 설정됨

}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

</script>

</html>

-HTML의 버튼 태그안에 어떤 속성을 넣든지 그것들은 prop이 될뿐 HTML태그 안에 들어가지 않는다

-커스텀 컴포넌트의 prop으로 뭐든지 사용할 수 있다

-부모함수의 상태를 바꾸는 함수를 생성한 것

-부모 함수에서 state의 변경이 발생했다면 모든 자식들은 다시 그려진다(리렌더링 됨)

정리

Props는 컴포넌트 간 데이터를 주고받을 때 사용하는 도구이다.
부모 컴포넌트에서 데이터를 내려주고, 자식 컴포넌트는 Props를 읽어서 화면에 표시한다.
Props는 수정 불가(읽기 전용) 이므로 데이터의 흐름을 예측하기 쉽게 만든다.

PropTypes란?

PropTypes는 React에서 컴포넌트의 props가 올바른 데이터 타입인지 검사하는 데 사용된다.
개발자가 실수로 잘못된 타입의 데이터를 전달할 경우, 콘솔에 경고 메시지를 출력해 디버깅을 도와준다.
앱이 커질수록 props의 데이터 타입을 명시하면 유지보수가 쉬워진다.

-props타입을 문자나 숫자로 고정하고 싶을 경우, 이를 react.js는 인식하지 못한다

=>PropTypes라는 이름의 패키지 이용

PropTypes: 어떤 타입의 prop을 받고 있는지 체크해줌

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

</body>

function Btn({ text, fontSize }) {

//2개의 props사용

return (

<button

style={{

backgroundColor: "tomato",

color: "white",

padding: "10px 20px",

margin: "10px",

border: 0,

borderRadius: "14px",

fontSize: fontSize,

}}

{text}

</button>

);

}

Btn.propTypes = {

text: PropTypes.string,

fontSize: PropTypes.number,

}; //props의 타입 지정->잘못 입력시 에러 출력

function App() {

const [value, setValue] = React.useState("save change");

const changeValue = () => setValue("changed");

//위 이벤트 리스너는 HTML태그에 포함시킬 수 없음->버튼 태그를 위한 이벤트리스너 아님

//Btn의 요소에 포함시켜야지만 적용됨->props를 가져와 적용시켜야 함

return (

<div>

</div>

); //props로 text를 전달함->버튼들은 app컴포넌트에 의해 설정됨

}

const root = document.getElementById("root");

ReactDOM.render(<App />, root);

</script>

</html>

function Btn({ text, fontSize =13}) {

-만일 props의 값이 부모 컴포넌트에서 지정되지 않았을 경우 기본 디폴트 값을 설정해 기본값 지정 가능

정리

컴포넌트를 생성해 마크업이나 스타일을 재사용할 수 있다

-버튼 컴포넌트를 설정하고 그 중 일부 요소만을 변경해 재사용하고 싶다면 props요소를 사용하면 된다

-특정 prop들을 전달받는 버튼 컴포넌트 생성

->prop들은 렌더링되고 있는 버튼 컴포넌트의 부모로부터 전달된다

-자식 컴포넌트에서 오브젝트로서 prop들을 전달 받을 수 있다=>{}내부에 넣어서 사용

-prop전달시 실수 할 수도 있음!(에러 인식 못함)=>prop들의 타입을 지정할 수 있다.(타입 실수 최소화)

Btn.propTypes = {

text: PropTypes.string.isRequired, //반드시 필요한 문장 요소

fontSize: PropTypes.number,

}; //props의 타입 지정->잘못 입력시 에러 출력