12.11) Home 페이지 구현하기 - 년월 (In/De)cre... - 인프런

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.11) Home 페이지 구현하기 2. 기능

12.11) Home 페이지 구현하기 - 년월 (In/De)crease 관련

해결된 질문

작성

101

수정됨

강사님께서 말씀주신대로 년월 증가처리에 대해서

동일하게 코드를 작성하였습니다.

<div>
            <Header 
                title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`}
                leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>}
                rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}
            />
            <DiaryList/>
        </div>

(질문)Home.jsx에서 Button 구성요소 ">" 클릭시에

onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다.

rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}

Button 구성요소에는 전달받은 onClick 전달받은

함수객체에 대해서 별도 처리가 없어도 되는것인가요?

const Button = ({text, type, onClick}) => {
    console.log("Button onClick : ", onClick)
    
    return (
        <button 
            onClick={onClick}
            className={`Button Button_${type}`}>
            {text}
        </button>
    )
}

javascript react node.js

답변 2

이정환 Winterlood

지식공유자

안녕하세요 이정환입니다.

네 이미 처리가 완료되어있는 코드입니다.

질문주신 코드에서 Header 컴포넌트에게 leftChild Props로 전달된 <Button onClick={onDecreaseMonth} text={"<"} /> 는 Button 컴포넌트의 렌더링 결과를 의미하는데, 이때 이 Button 컴포넌트에게 전달된 Props를 살펴보시면 다음과 같습니다.

onClick : onDecreaseMonth 함수
text : "<"

그러므로 아래의 코드와 같이 정의된 Button 컴포넌트는 위 Props에 따라 클릭시 onDecraseMonth 함수를 실행하는 버튼을 렌더링하게 됩니다.


// Button.jsx
const Button = ({ text, type, onClick }) => {
  return (
    <button onClick={onClick} className={`...`}>
      {text}
    </button>
  );
};

더 쉽게 정리하자면 Button 컴포넌트는 onClick 이라는 이름의 Props를 받아서, <button>의 onClick 이벤트 핸들러로 설정하고 있습니다. 이를 통해 이 <button>이 클릭되었을 때 onClick Props로 제공된 함수를 실행하도록 설정하고 있습니다.

그러므로 Button 컴포넌트에 onClick Props를 이미 전달했다면 이후에는 별도의 처리가 없어도 됩니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

wonyongick님, Button 컴포넌트 및 그 사용 방법에 대한 궁금증이 있으신 것 같습니다. 제가 해당 내용을 간단히 설명해드리겠습니다.

Button 컴포넌트에서 전달받은 함수 사용하기

Button 컴포넌트를 정의할 때, props로 onClick이라는 함수를 받습니다. 이를 아래와 같이 button 요소의 onClick 속성으로 넘겨주고 있습니다.

const Button = ({ text, type, onClick }) => {
    return (
        <button
            onClick={onClick} // 전달받은 onClick 함수를 button의 onClick 이벤트로 설정
            className={`Button Button_${type}`}
        >
            {text}
        </button>
    );
};

How it Works:

전달된 함수 그대로 사용: Button 컴포넌트는 onClick이라는 props를 통해 함수를 전달받고, 이 함수를 button 요소의 클릭 이벤트 핸들러로 사용합니다. 그러므로 button이 클릭되면 전달받은 onClick 함수가 호출됩니다. 이 과정에서 별도의 추가적인 처리가 필요 없습니다.
함수의 참조 전달: onClick={onClick} 부분은 단순히 함수 참조를 button의 onClick 이벤트에 전달하는 것입니다.

결론적으로, Button 컴포넌트 내부에서는 onClick 함수를 받기만 하고, 특별히 수정하지 않고 그대로 button의 클릭 이벤트로 사용하는 것이므로 별도의 처리가 만약 추가적인 로직이 필요하지 않으면 필요하지 않습니다. 만약 클릭 시 추가적인 동작이 필요하다면, Button 컴포넌트 내부에서 onClick 핸들러를 감싸는 형태로 추가 로직을 포함할 수 있습니다.

유사한 질문에 대한 참조 링크

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.

현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏

추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

12.11) Home 페이지 구현하기 - 년월 (In/De)crease 관련

Button 컴포넌트에서 전달받은 함수 사용하기

How it Works:

유사한 질문에 대한 참조 링크