React의 Hooks 활용

https://www.w3schools.com/react/react_usestate.asp

W3Schools.com

 

 

 

1. 위의 내용을 참고하여 useState 를 활용하여 글자 속성을 적용 시켜보세요.

import { useState } from "react"; 

// react의 Hook를 활용하여 useState를 가져와서 사용하겠다는 의미, import하지 않을 경우 에러 발생합니다.

function App(){

    // color 변수를 생성하면서 초기값 color를 'red'으로 Set(Java의 Setter와 유사함)

    const [color, setColor] = useState('red');

    console.log('useState 테스트');

   

    return(

        <div>

            <h1>My favorite color is {color}!</h1>

            <font color={color}><b>글자 색상</b></font>

        </div>

    );

}

export default App;

 

 

※ 만약에 자동으로 import { useState } from "react"; 가 상단에 자동으로 입력되지 않을 경우, 하단의 위치에 jsconfig.json 파일을 추가해 주면 됩니다.

 

 

alt : 그림이 로드 되지 않았을 때, 대안으로 보일 텍스트를 넣을 수 있습니다.

<img src={`/${image}`} alt={name} width="570" height="350" />

ex) alt={name}

이미지 로딩 실패시 화면

 

2. useState 를 활용하여 버튼을 클릭할 때마다, 이미지와 글자 색상이 바뀌도록 만들어보기

import { useState } from "react";

function App(){

    // color 변수를 생성하면서 초기값 color를 'red'으로 Set(Java의 Setter와 유사함)

    const [color, setColor] = useState('red');

    const [name, setName] = useState('장화신은고양이');

    const [image, setImage] = useState('장화고양이.jpg');

    const ClickEvent = () => {

        console.log('현재 색상 : ' + color);

        if(color === 'blue'){ //타입과 값이 모두 동일해야 참. ==보다 엄격한 비교연산자

            setColor('red');

            setName('고양이');

            setImage('고양이.jpg')

        }else{

            setColor('blue');

            setName('장화신은고양이');

            setImage('장화고양이.jpg')

        }

    }

    console.log('useState 테스트');

   

    return(

        <div>

            <h1>My favorite color is {color}!</h1>

            {/* <font color={color}><b>글자 색상</b></font> HTML5에 font는 비표준이어서 권고 되지 않음*/}

            <span style={{ color: color, fontWeight: "bold" }}>글자 색상</span>

            <font color={color}><b>글자 색상</b></font>

            <br/><br/>

            <button type="button" onClick={ClickEvent}>

                클릭시 이미지 변경 및 {color} 색상으로 변경

            </button>

            <br/><br/>

            <h4>{name}</h4>

            <img src={`/${image}`} alt={name} width="570" height="350" />

        </div>

    );

}

export default App;

 

<최초 화면>

 

<버튼 클릭 후 변경된 화면>