Share
Sign In
State, 참조형 State
State
react에서 화면을 새로 렌더링하기 위해서 사용하는 방법입니다.
주사위 예제로 돌아가서, 던지기 버튼을 클릭했을 때 주사위의 숫자가 바뀌기 위해 State를 사용합니다.
State는 이때 ReactDOM.render() 메서드가 새로 렌더링 할수 있도록 합니다.
State를 사용하기위해서는 react 객체에서 useState 메서드를 불러와야 합니다.
그런다음 다음과 같은 문법으로 사용할 수 있습니다.
useState 매서드의 파라미터로 State가 새로 렌더링 하기 전의 초기값을 넣어줍니다.
예를 들어 주사위 예제에서 State로 새로 렌더링 하기 전 초기값으로 1을 넣어주려면 아래와 같이 파라미터로 1을 넣어주면 됩니다.
useState 메서드는 2개의 값을 갖는 배열을 반환합니다. 배열의 첫번째 원소로는 State 값을 반환합니다. 쉽게 말해 현재 변수의 값을 나타냅니다.
바로 위의 코드에서 num은 초기값으로 1을 갖고 있습니다.
그리고 배열의 두번째 원소는 useState의 매서드의 파라미터로 전달하는 값으로, setNum의 메서드에 의해 useState 파라미터가 다음 값으로 변경해줍니다.
두번째 원소의 함수 이름으로 어떤것이 와도 상관 없지만 일반적으로 첫번째 원소의 이름 앞에 set을 붙인 형태로 이름을 짓습니다.
그럼 주사위 예제에서 주사위를 돌리는 기능을 구현해 봅시다.
기존의 Button 컴포넌트에는 onClick prop에 대한 처리가 없으므로 Button 컴포넌트도 알맞게 수정해야합니다.
실습예제
주사위 예제에 추가적으로 기능을 붙여봅시다.
주사위를 던질 때마다 주사위 값이 더해지는 총점을 만들어 볼것 입니다. App.js 를 수정하여 아래와 같은 결과화면이 나오도록 합니다.
이때 '나', '총점'을 h2 태그로, 총점 값은 p 태그로 구성합니다.
던지기를 누르면 지금까지 나왔던 주사위 눈의 수를 합산하여 출력하게 됩니다.
정답확인
State 참조형 데이터 업데이트
setState 는 render 메서드를 실행시켜 브라우저에 렌더링을 합니다. 이때 현재 state 값과 비교하여 값이 변경되어야 업데이트 동작이 일어납니다.
이때 참조형 데이터가 있을 경우, 예를 들어 배열로 할당된 state를 업데이트 하려고 할 경우, ushift 또는 push 메서드로 배열을 변경했다고 할지라도, react 입장에서는 state가 참조하는 배열의 주소값은 여전히 같으므로 state가 바뀌었다고 생각하지 않게 됩니다.
이때 참조형 데이터를 업데이트 하기 위해서는 새로운 참조형 값을 만들어 state을 변경하도록 해야합니다.
대표적으로 새 배열을 반환하는 방법으로, concat 또는 ... (spread)연산자가 있습니다.
주사위 예제로 돌아가 봅시다.
이전에 만들었던 총점 기능에 주사위 눈의 값을 기록하는 히스토리 기능을 만들어 볼것입니다.
useState 에 배열로 gameHistory 변수를 생성합니다.
그 다음 .push() 메서드를 이용하여 배열에 nexNum 값을 넣어주고, 초기화 단계는 초기 배열을 넣어 초기화를 시켜줍니다.
그 다음 .push() 메서드를 이용하여 배열에 nexNum 값을 넣어주고, 초기화 단계는 초기 배열을 넣어 초기화를 시켜줍니다.
출력부분에 .join() 메서드를 활용하여 배열속 원소 사이에 ", "문자열을넣고 자료형을 문자열로 바꾸었습니다.
이렇게 만들었을 때 한가지 문제점이 있습니다.
위의 코드에서 handleRollClick 함수 부분의 setNum(nextNum); 과 setSum(sum + nextNum); 을 주석처리하게 되더라도 주사위를 던질 때마다 기록은 random() 메서드에 의해 새롭게 추가되어야합니다.
하지만 실행해보면 기록이 추가되지 않는것을 볼 수 있습니다. 이것이 바로 위에서 먼저 설명한 배열이 참조형 데이터이기 때문입니다. .push() 메서드를 사용하더라도 배열의 주소값은 변경되지 않고, State는 변하지 않았다고 판단하게 됩니다.
이를 해결하기 위해서 spread 문법을 사용해 봅시다.
이렇게 되면 handleRollClick 함수 부분의 setNum(nextNum); 과 setSum(sum + nextNum); 을 주석처리하게 되더라도 기록은 업데이트 되는것을 볼 수 있습니다.
이처럼 참조형 데이터에 useState를 사용할 때는 유의해야합니다.
실습예제
React 홈으로 돌아가기
React.js
메인으로 돌아가기
State
react에서 화면을 새로 렌더링하기 위해서 사용하는 방법입니다.
주사위 예제로 돌아가서, 던지기 버튼을 클릭했을 때 주사위의 숫자가 바뀌기 위해 State를 사용합니다.
State는 이때 ReactDOM.render() 메서드가 새로 렌더링 할수 있도록 합니다.
State를 사용하기위해서는 react 객체에서 useState 메서드를 불러와야 합니다.
그런다음 다음과 같은 문법으로 사용할 수 있습니다.
useState 매서드의 파라미터로 State가 새로 렌더링 하기 전의 초기값을 넣어줍니다.
예를 들어 주사위 예제에서 State로 새로 렌더링 하기 전 초기값으로 1을 넣어주려면 아래와 같이 파라미터로 1을 넣어주면 됩니다.
useState 메서드는 2개의 값을 갖는 배열을 반환합니다. 배열의 첫번째 원소로는 State 값을 반환합니다. 쉽게 말해 현재 변수의 값을 나타냅니다.
바로 위의 코드에서 num은 초기값으로 1을 갖고 있습니다.
그리고 배열의 두번째 원소는 useState의 매서드의 파라미터로 전달하는 값으로, setNum의 메서드에 의해 useState 파라미터가 다음 값으로 변경해줍니다.
두번째 원소의 함수 이름으로 어떤것이 와도 상관 없지만 일반적으로 첫번째 원소의 이름 앞에 set을 붙인 형태로 이름을 짓습니다.
그럼 주사위 예제에서 주사위를 돌리는 기능을 구현해 봅시다.
기존의 Button 컴포넌트에는 onClick prop에 대한 처리가 없으므로 Button 컴포넌트도 알맞게 수정해야합니다.
실습예제
주사위 예제에 추가적으로 기능을 붙여봅시다.
주사위를 던질 때마다 주사위 값이 더해지는 총점을 만들어 볼것 입니다. App.js 를 수정하여 아래와 같은 결과화면이 나오도록 합니다.
이때 '나', '총점'을 h2 태그로, 총점 값은 p 태그로 구성합니다.
던지기를 누르면 지금까지 나왔던 주사위 눈의 수를 합산하여 출력하게 됩니다.
정답확인
State 참조형 데이터 업데이트
setState 는 render 메서드를 실행시켜 브라우저에 렌더링을 합니다. 이때 현재 state 값과 비교하여 값이 변경되어야 업데이트 동작이 일어납니다.
이때 참조형 데이터가 있을 경우, 예를 들어 배열로 할당된 state를 업데이트 하려고 할 경우, ushift 또는 push 메서드로 배열을 변경했다고 할지라도, react 입장에서는 state가 참조하는 배열의 주소값은 여전히 같으므로 state가 바뀌었다고 생각하지 않게 됩니다.
이때 참조형 데이터를 업데이트 하기 위해서는 새로운 참조형 값을 만들어 state을 변경하도록 해야합니다.
대표적으로 새 배열을 반환하는 방법으로, concat 또는 ... (spread)연산자가 있습니다.
주사위 예제로 돌아가 봅시다.
이전에 만들었던 총점 기능에 주사위 눈의 값을 기록하는 히스토리 기능을 만들어 볼것입니다.
useState 에 배열로 gameHistory 변수를 생성합니다.
그 다음 .push() 메서드를 이용하여 배열에 nexNum 값을 넣어주고, 초기화 단계는 초기 배열을 넣어 초기화를 시켜줍니다.
그 다음 .push() 메서드를 이용하여 배열에 nexNum 값을 넣어주고, 초기화 단계는 초기 배열을 넣어 초기화를 시켜줍니다.
출력부분에 .join() 메서드를 활용하여 배열속 원소 사이에 ", "문자열을넣고 자료형을 문자열로 바꾸었습니다.
이렇게 만들었을 때 한가지 문제점이 있습니다.
위의 코드에서 handleRollClick 함수 부분의 setNum(nextNum); 과 setSum(sum + nextNum); 을 주석처리하게 되더라도 주사위를 던질 때마다 기록은 random() 메서드에 의해 새롭게 추가되어야합니다.
하지만 실행해보면 기록이 추가되지 않는것을 볼 수 있습니다. 이것이 바로 위에서 먼저 설명한 배열이 참조형 데이터이기 때문입니다. .push() 메서드를 사용하더라도 배열의 주소값은 변경되지 않고, State는 변하지 않았다고 판단하게 됩니다.
이를 해결하기 위해서 spread 문법을 사용해 봅시다.
이렇게 되면 handleRollClick 함수 부분의 setNum(nextNum); 과 setSum(sum + nextNum); 을 주석처리하게 되더라도 기록은 업데이트 되는것을 볼 수 있습니다.
이처럼 참조형 데이터에 useState를 사용할 때는 유의해야합니다.
실습예제
React 홈으로 돌아가기
React.js
메인으로 돌아가기
State
react에서 화면을 새로 렌더링하기 위해서 사용하는 방법입니다.
주사위 예제로 돌아가서, 던지기 버튼을 클릭했을 때 주사위의 숫자가 바뀌기 위해 State를 사용합니다.
State는 이때 ReactDOM.render() 메서드가 새로 렌더링 할수 있도록 합니다.
State를 사용하기위해서는 react 객체에서 useState 메서드를 불러와야 합니다.
그런다음 다음과 같은 문법으로 사용할 수 있습니다.
useState 매서드의 파라미터로 State가 새로 렌더링 하기 전의 초기값을 넣어줍니다.
예를 들어 주사위 예제에서 State로 새로 렌더링 하기 전 초기값으로 1을 넣어주려면 아래와 같이 파라미터로 1을 넣어주면 됩니다.
useState 메서드는 2개의 값을 갖는 배열을 반환합니다. 배열의 첫번째 원소로는 State 값을 반환합니다. 쉽게 말해 현재 변수의 값을 나타냅니다.
바로 위의 코드에서 num은 초기값으로 1을 갖고 있습니다.
그리고 배열의 두번째 원소는 useState의 매서드의 파라미터로 전달하는 값으로, setNum의 메서드에 의해 useState 파라미터가 다음 값으로 변경해줍니다.
두번째 원소의 함수 이름으로 어떤것이 와도 상관 없지만 일반적으로 첫번째 원소의 이름 앞에 set을 붙인 형태로 이름을 짓습니다.
그럼 주사위 예제에서 주사위를 돌리는 기능을 구현해 봅시다.
기존의 Button 컴포넌트에는 onClick prop에 대한 처리가 없으므로 Button 컴포넌트도 알맞게 수정해야합니다.
실습예제
주사위 예제에 추가적으로 기능을 붙여봅시다.
주사위를 던질 때마다 주사위 값이 더해지는 총점을 만들어 볼것 입니다. App.js 를 수정하여 아래와 같은 결과화면이 나오도록 합니다.