리액트 개념 정리

리액트 프로젝트 생성

1. Visual Studio Code 실행
2. 터미널 열기
3. npx create-react-app 프로젝트명 입력
   
4. 파일 -> open folder 선택
5. 만들어진 프로젝트 선택
6. 터미널에 npm start 입력
   

css 적용

1. 태그 안에 css 작성

• rsc -> 자동으로 구조 완성

import React from 'react';

const Hello = () => {
    return (
        <div>
            <h1 style = {
                {
                    color : 'red',
                    backgroundColor : 'black'
                }
            }
            >Hello</h1>
        </div>
    );
};

export default Hello;

• html 태그 안에 직접 입력하는 방법. style={ } 형식으로 입력한다.
• 안에는 json 형식으로 속성명:'속성값' 으로 입력한다.
• 가장 높은 우선순위를 가진다.

2. CSS 스타일링 작성, Component에서 CSS파일 import

• Hello.css 작성

.box{
    width: 100px;
    height: 200px;
    background-color: green;
}

• Hello.js에 적용

import React from 'react';
import './Hello.css';

const Hello = () => {
    return (
        <div>
            <div className='box'></div>
        </div>
    );
};

export default Hello;

• 별도의 파일에 스타일을 정의해놓고, React 컴포넌트 파일에서 해당 CSS 파일을 임포트하여 사용
• 엘리먼트의 className 속성을 이용해서 외부 파일에 정의된 스타일을 맵핑시켜줌
• 이 방법을 사용하는 경우, 해당 모듈만이 아닌 전체 모듈에 적용이 된다.
  -> Hello.js 뿐만 아니라 App.js에서도 해당 css 적용

3. CSS-module 사용하기

• css-module을 이용하면 클래스명이 충돌하는 단점을 해결 할 수 있다.
• css-module을 이용하면 컴포넌트 단위로 스타일을 적용할 수 있다.

  문법 : {모듈명}.module.css
  import 방법 : import styles from "./모듈명.module.css";
  적용 방법 : {styles.클래스명}

• Hello.module.css

.box{
	width: 200px;
    height: 50px;
    background-color: blue;
    }

• Hello.js

import React from 'react';
import './Hello.css';
import styles from './Hello.module.css'

const Hello = () => {
    return (
        <div>
            <h1 style = {
                {
                    color : 'red',
                    backgroundColor : 'black'
                }
            }
            >Hello</h1>
            <div className='box'></div>
            <div className={styles.box}>Hello</div>
        </div>
    );
};

export default Hello;

이벤트 처리(Handling Events)

import React from 'react';

const Hello = () => {

    function showName(){
        console.log("Mike")
    }

    function showAge(age){
        console.log(age)
    }

    function showText(txt){
        console.log(txt)
    }

    return (
        <div>
            <h1>Hello</h1>
            <button onClick={showName}>Show name</button>
            <button onClick ={()=>{
                showAge(30)
            }}>Show age</button>
            <input type = 'text' onChange={(e)=>{
                const txt = e.target.value;
                showText(txt);
            }}></input>
        </div>
    );
};

export default Hello;

• 함수 이용하기
• onClick안에 바로 이벤트 작성하기
• input 태그의 onChange 사용 시 e.target.value를 사용해 input태그에 작성한 값이 바뀔 때 마다 그 값을 출력하도록 이벤트 작성

state,useState

import React, { useState } from 'react';


const Hello = () => {
    //let name = 'Mike'
    const [name, setName] = useState('Mike');

    function changeName(){
        const newName = name === 'Mike' ? 'Jane' : 'Mike';
        //name이 Mike이면 Jane을 name으로 변경하고, Jane이면
      	//다시 Mike로 변경
      
        console.log(name);
        setName(newName)
    }

    return (
        <div>
            <h1>state</h1>
            <h2>{name}</h2>
            <button onClick={changeName}>Change</button>
        </div>
    );
};

export default Hello;

• const [name, setName] = useState('Mike');
  • name : 현재 상태 값 변수
  • setName : 상태 값을 갱신해주는 Setter 함수
  • useState 괄호 안의 값 : 상태의 초기 값
• name === 'Mike' ? 'Jane' : 'Mike'
  • 조건 ? true일 때 : false 일 때
  • 같다 === / 다르다 !== (react에서)

props

props는 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것이다.

• App.js

import './App.css';
import Hello from './component/Hello';
function App() {
  
  return (
    <div className="App">
      <Hello age = {10}/>
      <Hello age = {20}/>
      <Hello age = {30}/>
     </div>
  );
}

export default App;

• Hello.js

import React, { useState } from 'react';


const Hello = (props) => {
    console.log(props);

    //props.age = 100; -> props 값 변경 불가능
    

    //let name = 'Mike'
    const [name, setName] = useState('Mike');
    const [age, setAge] = useState(props.age);

    function changeName(){
        const newName = name === 'Mike' ? 'Jane' : 'Mike';
        //name이 Mike이면 Jane을 name으로 변경하고, Jane이면 다시 Mike로 변경
        console.log(name);
        setName(newName);
        setAge(age+1);
    }

    return (
        <div>
            <h1>state</h1>
            <h2>{name}({age})</h2>
            <button onClick={changeName}>Change</button>
        </div>
    );
};

export default Hello;

• Hello 컴포넌트에 age값을 넘겨줌
• Hello.js에서 props의 값을 직접적으로 변경할 수 없음
• useState를 이용해 age 변수를 생성하고 초기 값을 props로 설정한 뒤 값을 변경할 수 있음

import React, { useState } from 'react';
import UserName from './UserName';


const Hello = ({age}) => {

    const [name, setName] = useState('Mike');
    const msg = age > 19 ? '성인입니다.' : '미성년자입니다.';

    return (
        <div>
            <h2 id = 'name'>
                {name}({age}) : {msg}
            </h2>
            <UserName name={name} />
            <button onClick = {()=>{
                setName(name === 'Mike'?'Jane':'Mike');
            }}>Change</button>
        </div>
    );
};

export default Hello;

• age를 바로 받아올 수 있으며, age값을 조건으로 msg를 설정한 뒤 조건에 따라 다른 메시지가 출력되도록 한다.
• name을 UserName.js에 넘겨주면, Hello.js의 name값이 변경될 때 UserName.js의 name값 또한 같이 변경된다.