REACT NATIVE 스터디. 3주차 퀴즈 DRACONIST

1. 다음 중 리액트 컴포넌트에 대한 설명으로 옳지 않은 것은?
   ① ThemeProvider는 theme속성을 반드시 필요로 한다.
   ② iOS에서는 statusBar를 설정해주어야 하고 안드로이드에서는 SafeAreaView로 노치디자인을 고려해야 한다.
   ③ TextInput컴포넌트에서는 placeholder에 인자를 넣지 않아도, 기본값으로 처리해줍니다.
   ④ 부모 컴포넌트의 속성값은 자식 컴포넌트의 매개변수로 전달된다.
   
   
2. 다음 리액트 메서드에 대해 옳지 않은 것은?
   ① Dimensions는 처음 값을 받아왔을 때 크기로 고정된다.
   ② useWindowDimensions는 수동으로 화면 크기 변경을 적용해준다.
   ③ attrs는 input, button, img등 의 arribute를 바꾸고 싶을 때 사용할 수 있다.
   ④ map함수를 통해 배열 내 각 요소를 새로운 규칙을 적용한 배열로 만들수 있다.
   
   
3. 다음 코드에서 틀린 부분을 고치시오.

<List width={width}>
    {Object.values(tasks)
        .reverse() 
        .map(item => (
            <Task text={item.text} />
        ))
    }
</List>

 

4. 다음은 옵셔널 체이닝(optional chaining) 연산자에 대한 문제입니다. 출력되는 것을 쓰시오.

const user = {
  name: "Alice",
  address: {
    city: "New York",
    zip: 10001
  }
};

console.log(user.address?.city); 
console.log(user.address?.country); 
console.log(user.contact?.email);

 

5. 두번째 코드는 첫번째 코드를 useContext를 이용해 더 간편하고 가독성 좋게 만든 것입니다. 빈 코드를 채우시오.

import React from 'react';
import styled from 'styled-components/native';
import { UserConsumer } from '../context/User';

const StyledText = styled.Text`
  font-size: 24px;
  margin: 10px;
`;

const User = () => {
  return (
    <UserConsumer>
      {({ user }) => <StyledText>Name: {user.name}</StyledText>}
    </UserConsumer>
  );
};

export default User;

import React, {useContext} from 'react';
import styled from 'styled-components/native';
import { UserConsumer } from '../context/User';
import UserContext from '../context/User'; 

const StyledText = styled.Text`
  font-size: 24px;
  margin: 10px;
`;

const User = () => {
  //여기에 들어갈 내용을 적으시오.
};

export default User;

 

6. 다음은 내비게이터 라이브러리의 내비게이션을 사용한 예제이다. 틀린 부분을 고치시오.

export default function App() {
  return (
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
  );
}

 

7. React Navigation에서 화면 속성을 설정하는 세 가지 방법 중 우선순위가 높은 것을 판별하는 문제이다. 이 코드에서 버튼을 눌렀을 때 화면에 적용될 헤더 스타일과 헤더 제목은 무엇일까?

<Stack.Navigator screenOptions={{ headerStyle: { backgroundColor: 'tomato' } }}>
  <Stack.Screen 
    name="Home" 
    component={HomeScreen} 
  />
  <Stack.Screen 
    name="Details" 
    component={DetailsScreen} 
    options={{ headerStyle: { backgroundColor: 'blue' } }} 
  />
</Stack.Navigator>

function DetailsScreen({ navigation }) {
  return (
    <View>
      <Text>상세 화면</Text>
      <Button 
        title="헤더 변경" 
        onPress={() => navigation.setOptions({ title: '새로운 제목' })} 
      />
    </View>
  );
}

① headerStyle은 blue, title은 '새로운 제목'

② headerStyle은 tomato, title은 '상세 화면'

③ headerStyle은 blue, title은 '상세 화면'

④ headerStyle은 tomato, title은 '새로운 제목'

답

1.② 안드로이드에서는 statusBar를 설정해주어야 하고 iOS에서는 SafeAreaView로 노치디자인을 고려해야 한다.

2.② useWindowDimensions는 자동으로 화면 크기 변경을 적용해준다.

3. 리액트에서 컴포넌트 배열은 유일한 key값을 꼭 지정해야 한다.

<List width={width}>
    {Object.values(tasks)
        .reverse() 
        .map(item => (
            <Task key={item.id} text={item.text} />
        ))
    }
</List>

4.New York
undefined
undefined

옵셔널 체이닝(Optional Chaining) 연산자는 null 또는 undefined 값을 안전하게 처리하기 위해 사용됩니다. 이 연산자는 객체 속성에 접근할 때 해당 속성이 존재하지 않으면 **undefined**를 반환하게 해줍니다.

<List width={width}>
    {Object.values(tasks)
        .reverse() 
        .map(item => (
            <Task key={item.id} text={item.text} />
        ))
    }
</List>

5. NavigationContainer가 없으면 동작하지 않는다.

import React, {useContext} from 'react';
import styled from 'styled-components/native';
import { UserConsumer } from '../context/User';
import UserContext from '../context/User';

const StyledText = styled.Text`
  font-size: 24px;
  margin: 10px;
`;

const User = () => {
  const { user } = useContext(UserContext);
  return <StyledText>Name: {user.name}</StyledText>;
};

export default User;

6. 

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

7.① headerStyle은 blue, title은 '새로운 제목'