React

리액트: UI를 만드는 자바스크립트 라이브러리

컴포넌트 개발

• 클래스->함수형으로 변하는 과도기

리액트 환경 구성

`npx create-react-app`
`npm start`
`npm run build`

npx serve -s build

CRA(Create React App) 기반의 환경설정
Webpack기반 빌드환경을 직접 구성하지 않는다.

사용자정의태그 (컴포넌트)

function Header(){
  return <header></header> 
}

function App(){
  return (
    <div>
      <Header></Header>
    </div>
    );
}

export default App;

prop (속성)

function Header(props){
  return <header>{props.title}</header> 
}

function App(){
  return (
    <div>
      <Header title="REACT"></Header>
    </div>
    );
}

export default App;

• 리액트는 자동으로 생성한 태그의 경우, 고유한 key값을 부여해야한다.

lis.map((e)=>`<li key={e.id}></li>`).join('')

이벤트

• html의 이벤트

  <input type="button" onclick="alert('hi')">

• 리액트 컴포넌트의 이벤트

  function Header(props){
    return <header>
      <h1><a href="/" onClick={event=>{
        event.preventDefault();
        props.onChanceMode();
      }}>{props.title}</a></h1>
     </header> 
  }
  
  function App(){
    return (
      <div>
        <Header title="REACT" onChangeMode={()=>{
          alert('Header');
        }}></Header>
      </div>
      );
  }

prop vs state -> 새로운 return

• 컴포넌트 함수를 다시 실행시키는 데이터

• prop: 컴포넌트를 사용하는 외부자를 위한 데이터

• state: 컴포넌트를 만드는 내부자를 위한 데이터
  - 이벤트가 발생하면 데이터(state)가 갱신되고 렌더까지 되도록!
  - 상태관리: React hooks API(useState) -> class없이 함수형으로 가능하다!
  ref) Hooks API 공식문서

       import {useState} from "react"; 
  
       function App(){
          const [mode,setMode]=useState("WELCOME") //초기값
         //배열을 리턴, 0번째 인덱스: 상태값, 1번째 인덱스: 상태값을 변경하는 함수
         //[읽기, 쓰기 인터페이스] = useState(초기값)
       }

원시값 vs 참조값

같은 데이터는 새로이 렌더링하지 않으므로 객체는 복사본을 만들어서 값을 변경한다.

const [value,setValue] = useState(Object); //object, array

// 원본과 복제본이 다르면(상태값이 변경되면) 함수호출 
newValue={...value} 
newValue=[...value]
setValue(newValue)

onChange

<textarea onChange={event=>{
  setTitle(event.target.value)
}}>
</textarea>

빈 태그

//여러개 태그를 grouping하는 빈 태그
<></>

• 생활코딩 리액트 강의를 보고 정리한 글입니다.
  https://www.youtube.com/watch?v=AoMv0SIjZL8&list=PLuHgQVnccGMCOGstdDZvH41x0Vtvwyxu7&index=1