[React.js] React 기초2 (+ css 파일, 이벤트 처리, state)

component 폴더에서 Hello.js 파일로 컴포넌트를 만들었다.

Hello.js

//  첫번째 방법 : 함수 선언문
//  const Hello=function(){
//     <p>Hello</p>;
//  }

import World from "./World";

//  export default Hello;

// 두번째 방법 : 화살표 함수
//const Hello2=()=>{
    // <p>Hello</p>;
//}
// export default Hello;

// 세번째 방법 : 한줄로 쓰기
export default function Hello(){
    return (
    <div>
        {/* css를 인라인으로 작성할 땐 반드시 객체 형태로 전달한다
            키값은 카멜케이스로 작성한다. 
            그냥 숫자만 있는 것을 제외한 문자열은 다 따옴표로 감싸주자
            하지만 특별한 이유가 없다면 이렇게 인라인으로 작성하지는 않는다.
             */}
        <h1 style={
{
        color : '#f00',
        borderRight : '2px solid #000',
        marginBottom : '30px',
        opacity : 0.5
}

        }>Hello</h1>
        <World />
        <World />
    </div>
    // jsx는 하나의 태그만 만들 수 있기 때문에, div로 감싸줘서 하나로 만든다.
    );
}

 

App.js

import './App.css';
import Hello from './component/Hello';
import Welcome from './component/Welcome';
// 마지막 .js는 생략할 수 있다.

function App() {
  return (
    <div className="App">
      <Hello /> 
      <Hello /> 
      <Hello /> 
      {/* 중간에 들어갈 내용이 없으면 셀프클로즈로 적어주는 게 좋다 
        이렇게 한번 만들어둔 컴퍼넌트는 어디에는 몇 번이든 재사용이 가능하다.*/}

      <Welcome></Welcome>
      {/* vs code에서는 오토 임포트를 편하게 컴포넌트를 가져올 수 있다. */}
    
    </div>
  );
}

export default App;

 

index.css : 전체 프로젝트에 영향을 미치는 스타일링이 되어 있다.

App.css : App 컴포넌트에 한정된 스타일링이 되어 있다.

이 css 파일에서 클래스를 추가하면서 사용할 수 있다.

 

각각 이렇게 연결되어 있음

App.module.css - App.js

Hello.module.css - Hello.js

이러면 같이 box 클래스 속성이여도, 한번에 들어간게 아니라 div 별로 각각 클래스가 적용된 것을 볼 수 있다.

 

 

 

---

Hello.js

export default function Hello(){

    function showName(){
        console.log("Mike");
    }
    //함수를 ()까지 써서 호출하면, 함수가 리턴해주는 값을 출력한다. 지금은 undefined 이다.
    function showAge(age){
        console.log(age);
    }
    function showText(e){
        console.log(e.target.value);
        //이벤트를 받아서 인풋 태그의 밸류를 출력하려는 것
        //즉, 입력하면 작성한 값을 출력시키겠다는 뜻 
    }


    return (
        <div>
            <h1>hello</h1>
            <button onClick={showName}>Show name</button>
            <button
                onClick={()=>{
                    showAge(30)
                }}
            >
                Show age
            </button>
            <input type="text" onChange={showText} />
            {/* onChange : 바뀔 때마다(입력할때마다) 찍히게 해준다 
                함수를 미리 선언해서 함수명만 적어주거나
                중괄호 안에서 바로 함수를 정의해서 써도 된다.*/}

        </div>
    )
}

 

---

state : component가 가지고 있는 속성값이다. 따라서 스테이트만 잘 관리하면 된다.

Hello.js

import { useState } from "react";

export default function Hello(){

    // let name="Mike";
    const [name, setName] = useState('Mike');
    //useState 는 배열을 반환하며, 
    //배열의 첫번째 값은 state(변수명), 
    //두번째 값은 이 스테이트를 변경해주는 함수, 괄호 안에 초기값 전달
    //함수가 작동해서 스테이트가 바뀌면, 리액트는 이 컴포넌트를 다시 렌더링해준다.
    // 동일한 컴포넌트를 여러 번 사용해도 스테이트는 각각 관리된다.

    function changeName(){
        const newName = name === "Mike" ? "Jane" : "Mike";
        //마이크일 땐 제인으로, 제인일 땐 마이크로 바꿔준다.
        setName(newName);
        // setName(name === "Mike" ? "Jane" : "Mike"); 이렇게도 가능

    }
    return (
        <div>
            <h1>state</h1>
            <h2>컴포넌트의 속성값</h2>
            <h2>{name}</h2>
            <button onClick={changeName}>change</button>
        </div>
    );
}

 

 

외부 참조 링크

https://www.youtube.com/watch?v=0AinoaApDjc&list=PLZKTXPmaJk8J_fHAzPLH8CJ_HO_M33e7-&index=4