-
1. 다음 중 React에 대한 설명으로 맞는 것을 모두 고르세요.
① React를 사용하기 위해서는 반드시 JSX를 사용해야 한다.
② JSX를 JavaScript로 변환해주는 도구이다.
③ 선언적인 형태로 View(화면) 설계가 가능하다.
④ 컴포넌트 형태로 작성하며, 상태의 캡슐화에 용이하다.
더보기③ 선언적인 형태로 View(화면) 설계가 가능하다.
④ 컴포넌트 형태로 작성하며, 상태의 캡슐화에 용이하다.2. 다음은 React에서 함수 컴포넌트를 만드는 예제입니다. JSX 문법을 잘못 사용하고 있는 예제를 고르세요.
① cosnt Hello = () => {
return (
<div>안녕하세요</div>
)
}
② cosnt Hello = () => {
return (
<div>안녕하세요</div>
<div>반갑습니다</div>
)
}
③ cosnt Hello = () => {
const name = 'jack'
return (
<div>안녕하세요 {name} 입니다</div>
)
}
④ cosnt Hello = () => {
return (
[<div>안녕하세요 {name} 입니다</div>]
)
}
더보기② cosnt Hello = () => {
return (
<div>안녕하세요</div>
<div>반갑습니다</div>
)
}3. 다음은 React에서 함수 컴포넌트를 만드는 예제입니다. JSX 문법을 잘못 사용하고 있는 예제를 고르세요.
① cosnt Hello = () => {
return (
<div>안녕하세요</div>
{1+1 === 2 ? (<div>참</div> : (<div>거짓</div>)}
)
}
② cosnt Hello = () => {
return (
<div>
{
if(1+1 === 2) {
return (<div>참</div>)
} else {
return (<div>거짓</div>)
}
}
</div>
)
}
③ cosnt Hello = () => {
if(1+1 === 2) {
return (<div>참</div>)
} else {
return (<div>거짓</div>)
}
}
④ cosnt Hello = () => (
<div>
{1+1 === 2 ? (<div>참</div>) : (<div>거짓</div>)}
</div>
)
더보기② cosnt Hello = () => {
return (
<div>
{
if(1+1 === 2) {
return (<div>참</div>)
} else {
return (<div>거짓</div>)
}
}
</div>
)
}4. props에 대한 설명으로 옳은 것을 고르세요.
① 변할 수 있는 (mutable) 데이터이다.
② 클래스 컴포넌트에서만 props를 사용할 수 있다.
③ props의 이름을 임의로 지정해줄 수 있다.
④ 단 하나의 props만 사용 가능하다.
더보기③ props의 이름을 임의로 지정해줄 수 있다.
5. <Tweet>새 트윗</Tweet>
위와 같은 방법으로 컴포넌트를 사용한다고 가정할 때, "새 트윗"이라는 문자열을 div태그 안쪽에 출력하기 위해
빈칸에 작성해야 할 코드는?
function Tweet(props) {
return <div>{______ __________}</div>
}
더보기props.children
6. 다음 중 컴포넌트를 만드는 방법 중 잘못된 것을 고르세요.
① function Hello() {
return <div>안녕하세요</div>
}
② cosnt Hello = () => {
return <div>안녕하세요</div>
}
③ const Hello = () => <div>안녕하세요</div>
④ class Hello extends React.component {
return (
<div>안녕하세요</div>
)
}
⑤ class Hello extends React.component {
render () {
return <div>안녕하세요</div>
}
}
더보기④ class Hello extends React.component {
return (
<div>안녕하세요</div>
)
}7. 다음 render() 메서드가 실행되면 어떤 일이 생기나요?
render() { let langs = ["JavaScript", "HTML", "Python"] return ( <div> {langs.map(it => <p>{it}</p> }) </div> ) }① 모든 언어 목록이 출력된다.
② 에러가 발생한다. 제대로 된 출력을 하기 위해서는 for 반복문으로 대체되어야 한다.
더보기① 모든 언어 목록이 출력된다.
8. const Hello = (props) => <div>{props.name}</div>
위와 같이 구현한 Hello 컴포넌트가 있습니다. name이라는 props를 전달하는 방법으로 잘못된 것을 고르세요.
① class Say extends React.Component {
render () {
return (
<Hello name="jack" />
)
}
}
② const Say = () => <Hello name={"jack"} />
③ class Say extends React.Component {
render () {
const name = "jack"
return (
<Hello name={name} />
)
}
}
④ class Say extends React.Component {
render () {
const props = {
name = "jack"
}
return (
<Hello {...props} />
)
}
}
⑤ const Say = () => <Hello props={name: "jack"} />
더보기⑤ const Say = () => <Hello props={name: "jack"} />
9. props와 state에 대한 설명으로 옳은 것을 모두 고르세요.
① 둘 다 변하지 않는 값이다.
② props를 다룰 때에는 순수 함수처럼 동작해야 한다.
③ state는 할당으로 수정이 가능하다.
④ 자식 컴포넌트의 상태를 부모 컴포넌트가 알 수 있다.
⑤ props는 부모 컴포넌트로부터 전달받고, state는 컴포넌트 내부에서 다뤄진다.
더보기② props를 다룰 때에는 순수 함수처럼 동작해야 한다.
⑤ props는 부모 컴포넌트로부터 전달받고, state는 컴포넌트 내부에서 다뤄진다.10. State를 변경하는 방법으로 옳은 것은 무엇인가요?
① class Say extends React.Component {
state = {
name: "Jack"
}
handleChangeState() {
setState({ name: "Rose" })
}
render() {
return (
<div>Hello Component</div>
)
}
}
② class Say extends React.Component {
state = {
name: "Jack"
}
handleChangeState() {
thsi.state({ name: "Rose" })
}
render() {
return (
<div>Hello Component</div>
)
}
}
③ class Say extends React.Component {
state = {
name: "Jack"
}
handleChangeState() {
this.setState({ name: "Rose" })
}
render() {
return (
<div>Hello Component</div>
)
}
}
④ class Say extends React.Component {
state = {
name: "Jack"
}
handleChangeState() {
this.state.name({ name: "Rose" })
}
render() {
return (
<div>Hello Component</div>
)
}
}
더보기③ class Say extends React.Component {
state = {
name: "Jack"
}handleChangeState() {
this.setState({ name: "Rose" })
}render() {
return (
<div>Hello Component</div>
)
}
}11. 상태 사용에 대한 설명으로 옳은 것을 모두 고르세요.
① this.state를 할당할 수 있는 곳은 constructor 뿐이다.
② this.setState의 전달 인자로는 객체나 함수 둘 다 사용할 수 있다.
③ this.setState를 사용하는 함수 내에서 상태는 즉시 갱신되지 않는다.
④ this.setState를 사용하지 않으면 컴포넌트는 새로운 값을 렌더링하지 않는다.
⑤ this.setState를 사용하는 이유는 lifecycle과 밀접하게 관련이 있다.
더보기① this.state를 할당할 수 있는 곳은 constructor 뿐이다.
② this.setState의 전달 인자로는 객체나 함수 둘 다 사용할 수 있다.
③ this.setState를 사용하는 함수 내에서 상태는 즉시 갱신되지 않는다.
④ this.setState를 사용하지 않으면 컴포넌트는 새로운 값을 렌더링하지 않는다.
⑤ this.setState를 사용하는 이유는 lifecycle과 밀접하게 관련이 있다.12. render method 내에서 setState method를 실행시킨다면 어떻게 될까요?
① 반복적으로 결과 값이 갱신되어 나타난다.
② Stack overflow 에러를 낸다.
③ Duplicate key 에러를 낸다.
④ 아무런 일도 발생하지 않는다
더보기② Stack overflow 에러를 낸다.
13. handleClick() {
this.setState((state) => ({
isOn: !state.isOn
}))
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isOn ? "ON" : "OFF"}
</button>
)
}
위 예제와 같이 클릭 이벤트 핸들러를 this binding 없이 호출할 때에, 에러가 나는 이유로 맞는 것은?
① this는 undefined 혹은, window 객체이기 때문에 setState 함수가 존재하지 않는다.
② this는 이벤트 객체이기 때문에 setState 함수가 존재하지 않는다.
③ this는 button 엘리먼트이기 때문에 setState 함수가 존재하지 않는다.
더보기① this는 undefined 혹은, window 객체이기 때문에 setState 함수가 존재하지 않는다.
'Problem' 카테고리의 다른 글
Authentication (0) 2020.12.18 Web Architecture (0) 2020.12.17 DOM (0) 2020.12.17 Graph, Tree, Binary Search Tree (0) 2020.12.17 Linked List, Hash Table (0) 2020.12.16