Devlog

React에 대해 공부하기4-Props

생각한대로 2023. 12. 2. 16:38

 

오늘은 정규 교육과정 중 React에 대해 공부한 것을 정리해 볼 계획이다.
(열심히 정리해 놓아야 나중에 궁금한 것이 생길 때 나의 개발블로그에서 찾으면 쉽기 때문에
시험 요점정리 해놓듯이 개념들을 재사용하기 위해 정리할 것이다!)

 

Props

props는 컴포넌트로 전달되는 매개변수라고 생각하면 된다.

컴포넌트에서 어떤 값을 전달받아 처리하려면 props를 이요하면된다. 그리고 컴포넌트를 호출할 때도 역시  props를 넘겨줘야 한다. 마치 함수 호출 시 매개변수를 전달하듯이, props도 같은 원리라고 보면 될 거 같다.

예를 들어,

function Introduce(props) {
  return <h2>I am a {props.name}!</h2>;
}

이런 식으로 정의하면

const element = <Introduce name="Rabbit" />;

<컴포넌트명 속성=전달할 값 />

이런식으로 같이 전달해줘야 한다.

이것을 응용해 보는 과정에서 헷갈리는 부분이 있어서 추가로 정리했다.

 

const data = {
  name: "Joshi",
  age: "25",
  gender: "남",
};

이런 식으로 키와 값을 가진 객체의 데이터를 전달해야 할 때

나는

function User (data){
return ~~~~


이런 식으로 매개변수에 data를 가져와

return <div>{props.name}</div>

 

이렇게 정의하는 줄 알았는데, 오류가 났다.

 

객체의 데이터를 전달할 때는

 

const data = {
    name: "Joshi",
    age: "25",
    gender: "남",
};

function App() {
    return (
        <div className="App">
            <Profile name={data.name} age={data.age} gender={data.gender} />
        </div>
    );
}

export default App;

 

이런 식으로 {data. 속성} 방식으로 정의해야 정상적으로 작동하는 걸 알았다.

이 개념에서 넘어가 배열을 불러와하는 것이 저번에 코딩했던

map함수관련된 것이라 생각된다.

시간이 있을 때, 관련된 것을 한번 다시 정리해 봐야겠다!

 

 

프론트엔드 부트캠프, 엘리스 SW 엔지니어 트랙

현업 개발자들이 추천하는 부트캠프, 프론트엔드, 백엔드, 웹 프로그래밍, 인공지능(AI), 데이터분석, 사물인터넷(IoT)까지! 개발자 성장 플랫폼 엘리스트랙에서 시작하세요.

elice.training

 

 #엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript

반응형