인프런 커뮤니티 질문&답변

Na Seunghoo님의 프로필 이미지

작성한 질문수

웹 게임을 만들며 배우는 React

5-2. setInterval과 라이프사이클 연동하기

이미지 div 부분의 style 템플릿 리터럴 부분이 적용이 되지 않습니다.

21.02.15 21:02 작성

·

235

0

render() {
        const {result, score, imgCoord} = this.state;
        return (
            <>
                {imgCoord}
                <div id="computer" style={{ background : `url('https://en.pimg.jp/023/182/267/1/23182267.jpg') ${imgCoord} 0` }}/>
                <div>
                    <button id="rock" className="btn" onClick={() => this.onClick('바위')}>바위</button>
                    <button id="scissor" className="btn" onClick={() => this.onClick('가위')}>가위</button>
                    <button id="paper" className="btn" onClick={() => this.onClick('보')}>보</button>
                </div>
                <div>결과 {result}</div>
                <div>현재 {score}</div>
            </>
        );
    }

1. 선생님 방식대로 따라했으나 이미지가 변경되지 않습니다. 

{imgCoord}를 별도로 꺼내서 찍어보면 변경이 되는데 

<div id ="computer" 의 `${imgCoord}`여기에 넣을 경 해당 태그의 속성에서는 값이 변경이 되지 않습니다 .왜그럴까요 ? 

답변 2

1

지현님의 프로필 이미지

2021. 07. 07. 20:13

class RSP extends Component {
state = {
result: "",
imgCoord: rspCoords.바위,
score: 0,
};

저는 state 부분에서 imgCoord 값을 0으로 안하고 rspCoords.바위로 설정해주니까 동작하더라구요 !

o6o4_님의 프로필 이미지

2021. 12. 07. 16:30

이거 때문에 한참 헤맸는데 감사합니다 ㅠㅠ

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2021. 02. 16. 01:18

위에 {imgCoord}가 바뀌고 있다면 아래 background도 같이 바뀌고 있을 겁니다. imgCoord가 0 -142px -284px 처럼 px까지 붙어서 바뀌고 있는게 맞나요?