리액트 2

초급 문제 정답

1. O
2. X
3. O
4. O
5. O
6. 1
7. 4
8. 2
9. 1
10. 3

---

중급 문제 정답

1. O
2. O
3. O
4. O
5. O
6. 2
7. 4
8. 1
9. 4
10. 3

---

고급 문제 정답

1. O
2. O
3. O
4. X
5. O
6. 4
7. 1
8. 3
9. 1
10. 2

============================================================================================

 

1. 이벤트 핸들링

• 리액트에서 이벤트를 사용할때의 주의 사항

 1) 이벤트의 이름은 카멜표현식을 사용 (onKeyUp)

 2)이벤트 핸들러로 자바스크립트 코드를 사용할 수 없고 함수 형태로 전달

<button onClick="javascript: alert(`hello`);">  : X

<button onClick = { ( ) => alert(`hello`)} /> : 함수로 화살표로 직접 정의

const onClick = ( ) => alert(`hello`);    : 외부에 정의한 함수 이름을 전달
<button onClick={onClick} />

 

 3) 이벤트 핸들러 함수가 매개변수를 필요로 하는 경우에는 다음과 같이 함수를 정의해서 넘겨줘야함

const onclick = message => alert(message);
<button onClick={( ) => onClick("hello")} />

 

4) 이벤트는 DOM요소에만 설정이 가능함

 

2. 이벤트핸들러 함수

const changeMessage = e => setMessage(e.target.value);
const changeUsername = e => setUsernaem(e.target.value);

return (
<>
onChange={changeMessage) value={message}
onChange={changeUsername} value = {username} 
</>

 

3. 상태 내리기/올리기

• 상태 내리기
  • 부모컴포넌트의 상태변수를 자식컴포넌트의 props 변수로 전달
  • 부모 컴포넌트의 상태변수가 변경되면 부모컴포넌트, 자식 컴포넌트 모두 렌더링
• 상태 올리기
  • 자식 컴포넌트에서 발생한 변경사항(이벤트)을 부모 컴포넌트로 전달하는 방법
  • 부모컴포넌트에서 정의한 상태변경 함수를 자식 컴포넌트의 props 변수 값으로 전달하면 해당 함수를 자식 컴포넌트의 이벤트 핸들러 함수로 설정 

4. ref

• DOM 요소나 리액트 컴포넌트에 대한 참조를 생성, 관리하는데 사용되는 특별한 속성

5. 라이프 사이클

• 컴포넌트가 생성, 업데이트, 소멸되는 과정에서 호출되는 메서드

6. CompnentDidMount

• 컴포넌트가 처음 렌더링도니 이후에 호출
• 자바스크립트 라이브러리 또는 프레임워크 등을 이용해서 함수를 호출하거나 이벤트를 등록, setTimer, setInterval, 네트워크 요청과 같은 비동기 작업을 처리함

7. hook

• 함수형 컴포넌트에서 클래스형 컴포넌트에서 제공하는 기능을 지원하기 위해서 도입된 함수
  • state, props, ref, 라이프사이클 메서드 등

7 - 1. useState

• 함수형 컴포넌트 상태 변수를 관리하기 사용하는 훅함수
• 배열 안에 있는 변수 중 하나라도 값이 변경 되었을때 이펙트 함수가 실행
• 렌더링 후에 초기 데이터를 가져올때 사용된다.

7 - 2. useEffect

• 클래스형 컴포넌트의 compnentDidMount, componentDidUpdate, componentWillUnmount를 합친형태
• useEffect(이펙트 함수, 의존성배열);
  • 의존성 배열 :
    • 이펙트 함수가 의존하고 있는 배열
    • 배열 안에 있는 변수 중 하나라도 값이 변경되면 이펙트 실행

7 - 3. 후처리 함수(cleanup)

• 컴포넌트가 언마운트 또는 리렌더링 전에 어떤 작업을 수행하고 싶을때, 이펙트 함수에서 후처리 작업을 수행하는 함수를 추가 

8. useRef

• 함수형 컴포넌트에서 DOM 요소를 직접 제어하기 위해서 사용
• ref 속성(attribute)과 useRef훅을 사용해 HTML DOM 요소와 JavaScript코드 연결

9. 컴포넌트의 로컬 변수로 사용

 1) 지역변수의 경우 : 구현이 안됨. 렌더링 마다 초기화되서 값을 유지할 수 없음

 2) 상태변수를 사용하는 경우 

• 렌더링 되더라도 값은 유지됨.
• 만약 값컨트롤을 잘못할 시 무한 렌더링에 빠질 수 있음
• 값이 변경되면 렌더링이 발생한다.

3) Ref를 사용하는 겨우

• 값이 변경되어도 렌더링되지 않고 계속해서 값이 유지됨

10. useReducer

• 상태관리 로직이 복잡할때 useState의 대체품으로 사용
• 현재 상태와 액션을 받아 새로운 상태를 반환하는 리듀서(reducer)함수를 통해 상태를 관리
• useReducer는 리듀스 함수와 초기 상태를 인자로 받은 상태와 디스패치를 반환

11. 리듀스 함수

• 현재 상태와 액션을 받아 새로운 상태를 반환하는 함수
• 초기 상태 : 상태의 초기값
• 액션 : 상태를 변경하기 위한 정보가 담긴 객체, 일반 적으로 type 속성을 가지고 있으며, 필요에 따라 추가 데이터를 포함할 수 있음
• 디스패치 함수 : 액션을 리듀서로 전달해 상태를 업데이트하는 함수

useState를 이용하여 Counter 컴포넌트를 구현

const Counter = ( ) => { 
     const [count, setCount] = useState(0);
     const changeCountPlus = e => setCount(count +1);
     const changCountMinus = e => setCount(count -1);
return ( 
 <>
 <button onClick = {changeCountPlus}>

 <button onClick = {changeCountMinus}>
< / >
);
}

 

useReducer 훅을 이용해서 컴포넌트를 작성

function reducer(state, action) {
 switch(action.type) {
  case "PLUSONE" : 
    return {count : state.count +1};
  case "MINUSONE" :
    return {count : state.count -1};
default :
return state;
   }
}
//카운터 선언
const Counter = ( ) => { 
 const [state, dispatch] = useReducer(reducer, {count : 0 }); //기본값 설정
 
return ( 
<>
 <button onClick={( ) => dispatch({type: "PLUSONE"})}/>

• 리듀스 함수를 정의하는 reducer( )
• state : 현재 상태변수의 값을 표현
• action : 상태변수의 필요한 조건과 값

12. useMemo

• 성능 최적화를 위해 특정값이 변경될 때 만 메모제이션 된 값을 재계산하도록 하여 불필요한 계산을 방지하는 장치
• 계산비용이 높은 작업 또는 렌더링 중에 자주 호출되는 작업에 유용함

const memoizedValue = useMemo ( ( ) => computerExpensiveValue(a, b), [a,b] );

1. 계산을 수행하는 함수
2. 의존성배열
   • 배열의 값이 변경되었을 때만 함수를 실행
   • 의존성 배열을 넣지 않았을 경우, 렌더링이 일어날때마다 매번 함수를 실행

 

13. useCallback

• useMemo와 비슷하게 성능최적화를 위해 사용됨
• useCallback은 콜백함수가 불피룡하게 다시 생성되는것을 방지  : 컴포넌트가 리렌더링될때 동일한 콜백함수를 사용하도록 함
• 콜백함수가 자식 컴포넌트의 props로 전달되는 경우 유용함

 

초급 문제

1. 리액트에서 이벤트의 이름은 어떤 형태로 작성해야 하나요?
   a) camelCase
   b) PascalCase
   c) snake_case
   d) kebab-case
2. 다음 중 올바른 이벤트 핸들러 사용 예시는?
   a) <button onClick="javascript: alert('hello');">
   b) <button onClick={() => alert('hello')}>
   c) <button onClick='alert("hello")'>
   d) <button onAlert='click("hello")'>
3. 이벤트 핸들러 함수가 매개변수를 필요로 할 때 어떻게 정의하나요?
   a) const onClick = () => alert('hello');
   b) const onClick = (message) => alert(message);
   c) <button onClick={(message) => alert(message)}>
   d) <button onClick={alert(message)}>
4. 이벤트는 어디에만 설정이 가능한가요?
   a) 모든 요소
   b) DOM 요소
   c) 자바스크립트 코드
   d) 모든 HTML 태그
5. 이벤트 핸들러 함수에서 'e.target.value'는 무엇을 의미하나요?
   a) 이벤트 객체의 값
   b) 타겟 요소의 값
   c) 함수의 반환 값
   d) 변수의 값

중급 문제
6. 상태 내리기는 어떤 상황에서 사용되나요?
a) 부모 컴포넌트에서 자식 컴포넌트로 상태를 전달할 때
b) 자식 컴포넌트에서 부모 컴포넌트로 상태를 전달할 때
c) 상태를 초기화할 때
d) 이벤트를 등록할 때

1. 상태 올리기는 어떤 상황에서 사용되나요?
   a) 부모 컴포넌트에서 자식 컴포넌트로 상태를 전달할 때
   b) 자식 컴포넌트에서 부모 컴포넌트로 상태를 전달할 때
   c) 상태를 초기화할 때
   d) 이벤트를 등록할 때
2. 리액트의 Ref는 무엇을 참조하나요?
   a) DOM 요소나 컴포넌트
   b) 함수나 변수
   c) 문자열
   d) 배열
3. 리액트 컴포넌트의 라이프 사이클에서 'ComponentDidMount'는 언제 호출되나요?
   a) 컴포넌트가 처음 렌더링된 이후
   b) 컴포넌트가 업데이트된 이후
   c) 컴포넌트가 소멸되기 전
   d) 컴포넌트가 생성되기 전
4. 리액트의 훅(Hook)은 어떤 용도로 사용되나요?
   a) 함수형 컴포넌트에서 클래스형 컴포넌트의 기능을 지원
   b) 클래스형 컴포넌트에서 함수형 컴포넌트의 기능을 지원
   c) 자바스크립트 코드를 최적화
   d) 스타일링을 추가

고급 문제
11. useState 훅은 언제 사용되나요?
a) 상태 변수를 초기화할 때
b) 상태 변수를 업데이트할 때
c) 상태 변수를 삭제할 때
d) 상태 변수를 변환할 때

1. useEffect 훅은 어떤 클래스형 컴포넌트 메서드와 유사한가요?
   a) componentWillMount
   b) componentWillReceiveProps
   c) componentDidUpdate
   d) componentDidMount
2. useEffect의 의존성 배열은 어떤 역할을 하나요?
   a) 함수가 의존하는 배열
   b) 렌더링 시 배열의 값을 변경
   c) 배열 안의 변수 값이 변경될 때 함수 실행
   d) 배열의 값을 초기화
3. useRef 훅은 어떤 상황에서 사용되나요?
   a) 상태 변수를 직접 제어할 때
   b) DOM 요소를 직접 제어할 때
   c) 상태 변수를 초기화할 때
   d) 이벤트 핸들러 함수를 정의할 때
4. useReducer 훅은 어떤 상황에서 사용되나요?
   a) 상태 관리 로직이 복잡할 때
   b) 상태 변수를 초기화할 때
   c) 상태 변수를 업데이트할 때
   d) 이벤트를 등록할 때

추가 문제

16. useReducer의 리듀스 함수는 무엇을 반환하나요?
 a) 새로운 상태
 b) 기존 상태
 c) 상태 변수
 d) 상태 액션

1. useMemo 훅은 어떤 경우에 유용한가요?
   a) 렌더링 중 자주 호출되는 작업
   b) DOM 요소를 직접 제어할 때
   c) 이벤트 핸들러 함수를 정의할 때
   d) 상태 변수를 초기화할 때
2. useMemo 훅에서 의존성 배열이 없을 경우 어떤 일이 일어나나요?
   a) 함수가 렌더링될 때마다 실행
   b) 함수가 한 번만 실행
   c) 함수가 실행되지 않음
   d) 함수가 오류를 발생
3. useCallback 훅은 어떤 상황에서 유용한가요?
   a) 콜백 함수가 자식 컴포넌트의 props로 전달될 때
   b) 상태 변수를 직접 제어할 때
   c) 렌더링 중 자주 호출되는 작업
   d) DOM 요소를 직접 제어할 때
4. useCallback 훅은 어떤 기능을 방지하나요?
   a) 콜백 함수가 불필요하게 다시 생성되는 것
   b) 상태 변수가 업데이트되는 것
   c) 이벤트 핸들러 함수가 정의되는 것
   d) 상태 변수가 초기화되는 것
5. useReducer 훅의 초기 상태는 무엇인가요?
   a) 상태의 초기 값
   b) 상태의 최종 값
   c) 상태의 변경 값
   d) 상태의 중간 값
6. useReducer 훅의 액션은 무엇을 포함할 수 있나요?
   a) 상태를 변경하기 위한 정보
   b) 상태의 초기 값
   c) 상태의 중간 값
   d) 상태의 최종 값
7. useReducer 훅의 디스패치 함수는 어떤 역할을 하나요?
   a) 액션을 리듀서로 전달해 상태를 업데이트
   b) 상태를 초기화
   c) 상태를 삭제
   d) 상태를 변환
8. useRef를 로컬 변수로 사용할 때 어떤 점이 다른가요?
   a) 값이 변경되어도 렌더링되지 않음
   b) 값이 변경되면 렌더링됨
   c) 렌더링 시 값이 초기화됨
   d) 값을 유지할 수 없음
9. 상태 내리기와 상태 올리기에서 공통적으로 사용하는 것은?
   a) 부모 컴포넌트의 상태변수
   b) 자식 컴포넌트의 상태변수
   c) 이벤트 핸들러 함수
   d) 모든 컴포넌트의 상태변수
10. 상태 내리기에서 상태변수가 변경되면 어떤 일이 발생하나요?
    a) 부모 컴포넌트와 자식 컴포넌트 모두 렌더링
    b) 부모 컴포넌트만 렌더링
    c) 자식 컴포넌트만 렌더링
    d) 렌더링되지 않음
11. useEffect 훅의 후처리 함수는 어떤 경우에 유용한가요?
    a) 컴포넌트가 언마운트 또는 리렌더링 전에 작업 수행
    b) 컴포넌트가 마운트되기 전에 작업 수행
    c) 컴포넌트가 업데이트되기 전에 작업 수행
    d) 컴포넌트가 렌더링된 후에 작업 수행
12. useRef 훅을 이용해 HTML DOM 요소와 연결할 때 사용하는 속성은?
    a) ref 속성
    b) key 속성
    c) class 속성
    d) style 속성
13. useEffect 훅에서 의존성 배열의 값이 변경되면 어떤 일이 발생하나요?
    a) 이펙트 함수가 실행됨
    b) 렌더링이 초기화됨
    c) 이펙트 함수가 비활성화됨
    d) 상태 변수가 업데이트됨