04~05 - 스터디 퀴즈

[ohr0226]

ref를 꼭 사용해야하는 상황을 대표적으로 세가지만 말해보세요

[ohr0226]

이벤트를 사용할 때 주의 사항으로 틀린 것을 고르세요

1. 카멜 표기법으로 작성한다.
2. 이벤트에 함수 형태의 값을 전달한다.
3. DOM뿐만 아니라 컴포넌트에도 이벤트를 설정할 수 있다.

[EYEG]

리액트 프로젝트 내부에서 DOM에 이름을 다는 방법을 (_____)이라고 한다.

ref는 DOM을 (_____)할 때 사용한다.

리액트에 내장된 (_____) 함수를 사용하면 ref를 만들 수 있다.

컴포넌트의 안전한 처리를 위하여 ref는 주로 (_____)를 활용하여 메서드를 작성한다.

[seokhj]

console.log(e)
console.log(e.target)
console.log(e.target.value)

위 3가지를 콘솔로 찍었을 때 어떤게 나오는지 말씀해보세요.

[seokhj]

class EventPractice extends Component {
    state = {
        message: ''
    }

    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick() {
        alert(this.state.message);
        this.setState({
            message: ''
        })
    }

    render() {
        return (
            <div>
            <button onClick={this.handleClick}>확인</button>
            </div>
        )
    }
}

위 클래스형 constructor에서 this를 사용할 때 바인딩(bind)을 붙여야하는 이유를 말씀해보세요.

[cheesepizza453]

객체 안에서 key를 '이것'으로 감싸면 그 안에 넣은 레퍼런스가 가리키는 실제 값이 key 값으로 사용됩니다. 이것은 무엇일까요?

[andrewylies]

주석 참고

import {Component} from ' react' ;

class EventPractice extends Component {
    state = {
        message: ''
    }

    constructor(props){
        super();
        this.handleChange = this.handleChange.bind(this); //<---- 요거 하는 이유가 뭐임
        this.handleClick = this.handleClick.bind(this); //<---- 요거 하는 이유가 뭐임
    }

    handleChange(e){
        this.setState({
            message: e.target.value
        });
    }

    handleClick(){
        alert(this.state.message);
        this.setState({
            message: ''
        }); 
            }

    render() {
        return (
            <div>
                <h1>이벤트 연습</h1>
                <input
                    type="text"
                    name="message"
                    placeholder="아무거나 입력해 보세요"
                    value={this.state.message}
                    onChange={
                        (e) => {
                            this.setState({
                                message: e.target.value
                            })
                        }
                    }
                />
                <button onClick={
                    () => {
                        alert(this.state.message);
                        this.setState({
                            message: ''
                        });
                    }
                }>확인
                </button>
            </div>
        );
    }
}

[andrewylies]

아래 컴포넌트를 호출 할때 setEnter / setLeave 에서 무슨 에러 날까요? 그 에러를 어케 해결해야할까여?

const SectionHomeCtaItem: React.FC<IData> = (props) => {
  const refLottie = useRef<Player>(null);

  const setEnter = useCallback(() => {
    refLottie.current.setPlayerDirection(1);
    refLottie.current.play();
  }, []);

  const setLeave = useCallback(() => {
    refLottie.current.setPlayerDirection(-1);
  }, []);

  return (
    <PlacerLink
      href={props.link.href}
      target={props.link.target}
      legacyBehavior={true}
    >
      <S.Container onMouseEnter={setEnter} onMouseLeave={setLeave}>
        <S.Lottie>
          <Player
            ref={refLottie}
            src={props.lottie.src}
            loop={false}
            speed={0.8}
            controls={true}
          ></Player>
        </S.Lottie>
        <S.Article>
          <S.H5>{props.txtTitle}</S.H5>
          <S.P>{props.txtSub}</S.P>
        </S.Article>
      </S.Container>
    </PlacerLink>
  );
};

export default SectionHomeCtaItem;

[EYEG]

[향훈퀴즈]

1.
function BlackDog() {
    this.name = '흰둥이';
    this.bark = function (){
        this.name = '노랭이'
        console.log(this.name)
    }
}
const blackDog = new BlackDog();
console.log(blackDog)
blackDog.bark(); // ??: 멍멍!
console.log(blackDog)




2.

function BlackDog() {
    this.name = '흰둥이';
    return {};
}
const blackDog = new BlackDog();
console.log(blackDog)

function BlackDog() {
    this.name = '흰둥이';
    return 0;
}
const blackDog = new BlackDog();
console.log(blackDog)

3.
console.log(100 >> 1);
console.log(100 << 1);

4.
const arr = [1,2,3,4]

const arr2 = arr;
arr[0] = 5;

console.log(arr)
console.log(arr2)
console.log(arr === arr2)

[wihyanghoon]

let i = 0;

console.log(i++)
console.log(++i)

//예상되는 콘솔값은?

정답

0
2

해설

보통 1, 2 가 나올것을 예상하지만 아닙니다. 증감연산자는 크게 2개 로 나뉘며 증감값의 위치에 따라 전위, 후위로 나뉘어 집니다. 증감연산자의 경우 단독으로 쓰일경우는 예상한것 처럼 작동하지만 연산이나 값의 할당 출력등에 따라 증감의 시점이 나뉘어집니다. 전위의 경우 먼저값을 상승 시킨 뒤 출력되며 후위의 경우는 반대입니다. 그럼이만...화이팅

[wihyanghoon]

function BlackDog() {
    this.name = '흰둥이';
    return {};
}
const blackDog = new BlackDog();
console.log(blackDog)

function BlackDog() {
    this.name = '흰둥이';
    return 0;
}
const blackDog = new BlackDog();
console.log(blackDog)

해설

두가지의 경우 출력하는 값이 예상하는것과는 다르실겁니다. 첫문제 부터 보겠습니다. 첫문제의 경우는 return 으로 객체를 보내고 있습니다. 이럴 경우 생성자 함수는 return의 값을 그대로 return 하여 {} 가 출력됩니다. 하지만 2번째의 문제의 경우는 return 값에 0을 넣었을경우 0이 출력될것을 대부분 예상하지만 생성자 함수의 특성상 생성자함수의 멤버변수를 가르키는 인스터스 객체가 나오게 됩니다. 사실 생성자 함수는 retrun 값의 객체 즉 인스턴스 인값을 return 시키지 않는 이상 그냥 생성자 함수를 호출하고 인스턴스를 생성하는 법칙을 가지고 있습니다. 0 뿐만 아니라 일반 string 값을 retrun 하더라도 동일합니다. 자바스크립트의 법칙이니 너무 깊게 생각하지마세요~!

const arr = [1,2,3,4]

const arr2 = arr;
arr[0] = 5;

console.log(arr)
console.log(arr2)
console.log(arr === arr2)

해설

사실 배열을 변수에 담고 새로운 변수의 할당을 하게되면 변수의 값을 넘긴것이 아닙니다. 배열은 항상 주소값을 가지며 새로운 변수에 변수값을 할당시 주소값이 넘어가며 새롭게 할당된 변수배열을 수정하여도 같은 메모리의 주소값을 찾아 그 메모리안에 들어있는 값을 수정하기 때문에 원본의 배열의 값도 변화하게 되는것입니다. 책에서 다들 뭐 깊은복사 얇은복사라고하는데 그게 말이 더어려운거 같더라구요 구조분해할당이 이래서 나온거고 const arr2 = [...arr] 이 경우가 주소값을 준게 아닌 값을 할당한 상황 입니다.

console.log(100 >> 1);
console.log(100 << 1);

해설

정답 : 50, 200 100을 이진수로 변환하면 1100100 첫라인의 콘솔의 경우 뒷자리 한자리를 버립니다. 110010 이되며 이것을 십진수로 변환 후 출력합니다. 두번째라인의 콘솔의 경우 뒷자리 한자리를 추가합니다 11001000 이되면 이것을 십진수로 변환 후 출력합니다. 사실 모든 프로그래밍언어는 컴파일이 되면서 01의 숫자 이진수로 표시되며 리액트 코어단에서 실행시 우선순위 판단을 시프트연산자를 통해 이루어집니다. 시프트 연산자는 프로그래밍상 존재하는 십진수의 수를 이진수로 변화하고 연산이 끝나면 다시 십진수로 반환합니다.

[wihyanghoon]

다음은 알고리즘 문제입니다. 도전해보세요~!

아래의 코드가 실행시 출력되는 값을 쓰시오.

function sort() {
    let arr = [3, 2, 1, 4];

    for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr.length - 1; j++) {
            if (arr[j] > arr[j + 1]) {
                let temp = arr[j + 1];
                arr[j + 1] = arr[j];
                arr[j] = temp;
            }
        }
    }
    return arr;
}
console.log(sort());

해설

정답은 1,2,3,4 버블정렬 알고리즘입니다. 자바스크립트에는 sort라는 내장객체로 정렬 해주는 메서드가 존재하지만 기본적으로 sort안에 메서드는 저런식의 알고리즘의 형식으로 되어있습니다. 변수는 사라지면 값을 찾을 수 없기때문에 정렬 시 한가지 변수를 다른곳에 담아 두어야합니다. 컵두개에 각각 사이다와 콜라를 넣었다고 생각해보면 그 두개를 서로 컵의 내용물을 바꾸기 위해서 또 하나의 빈컵이 필요한 샘 입니다. 여기서 빈컵은 temp이며 정렬할 값을 temp에 담아 두어야 합니다.

[cheesepizza453]