- 이렇게하면 const test ‘ message’ 를 직접 참조할때는 externalTest를 사용하고,
- 함수의 매개변수로 전달받은 test 를 사용할때는 그대로 test 를 사용할 수 있다.
- 매개변수는 함수에 입력값을 전달하는 데 사용된다.
- 함수가 어떤 작업을 수행하기 위해 필요한 데이터를 받아들이기 위한 매개변수를 정의한다.
const externalTest = 'message';
const renderDayComponent = ({ date, selectedDate, test }) => {
// 'test' 변수는 함수 내부에서는 매개변수로 전달된 객체의 test 속성을 가리킨다.
// 함수 내부에서 외부의 const externalTest = 'message'; 를 참조하고 싶다면,
// 함수의 매개변수 이름을 해당 변수와 충돌하지 않도록 다르게 지정해줘야 한다.
console.log(externalTest, 'externalTest'); // 'message'
return (
<View>
<Text>{date.day}</Text>
</View>
);
};
export default function App(){
const renderDayComponent = ({ date, selectedDate, test }) => {
// 예시: test 값이 'special'일 때 스타일을 설정
const textStyle = test === 'special' ? styles.specialText : styles.defaultText;
return (
<View>
<Text style={textStyle}>{date.day}</Text>
</View>
);
};
return (
// test 값이 'special'인 경우
renderDayComponent({ date: someDate, selectedDate: someSelectedDate, test: 'special' });
// test 값이 다른 경우
renderDayComponent({ date: someDate, selectedDate: someSelectedDate, test: 'otherValue' });
);}
'FrameWork > React' 카테고리의 다른 글
[React] 속성 이름을 동적으로 설정 ( 표현식, 변수의 문자열 또는 결과 값 ) (0) | 2023.12.11 |
---|---|
[React] 리액트에서 if문 , 조건부 렌더링 패턴 (0) | 2023.12.05 |
[React] Component / & 모든 부모 컴포넌트의 속성을 그대로 전달하기 위한 문법 (0) | 2023.12.05 |
[React] 함수형 업데이트 패턴 (최신 값 보장) (0) | 2023.12.04 |
[React] Prettier 설정 (0) | 2023.12.04 |