본문 바로가기

FrameWork/React

[React] 함수 매개변수와 외부 변수 간의 스코프(scope)

  • 이렇게하면 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' });
);}