[TIL] 엘리스 SW 엔지니어 트랙 Day 047

📖 오늘 배운 내용 - 2021.12.28

• 리액트 수업 시작
• create-react-app

 

📝 리액트 CRA로 시작하기

📕 해당 폴더에 리액트 프로젝트 설치

npx create-react-app .

 

📕 해당 폴더에 react-app 폴더를 만들어서 리액트 프로젝트 설치

npx create-react-app react-app 

 

📕 리액트 실행

npm run start

 

📝 create-react-app

• npm run start
• src/index.js : 엔트리 파일
• public/index.html : html 템플릿 파일
• npm run build : 배포 버전 생성
• build : 배포 버전의 내용
• import ‘filename.css’를 이용해서 css를 사용할 수 있다.
• 리액트는 하나의 태그가 전체를 감싸야 된다.
• 사용자 정의 태그는 무조건 대문자로 시작한다.
  • 소문자로 시작하면 html native 태그로 인식한다.
• 사용자 정의 태그란? → 컴포넌트

 

📝 리액트에서 파라미터를 전달하는 방법 :: props

import './App.css';

function Header(props) {
  console.log(props.onChangeMode);
  function onClickHandler(evt) {
    evt.preventDefault();
    props.onChangeMode();
  }

  return (
    <header>
      <h1><a href="index.html" onClick={onClickHandler}>{props.title}</a></h1>
    </header>    
  )
}

function Nav(props) {
  let lis = [];
  for(let i = 0; i < props.data.length; i++) {
    let d = props.data[i];
    lis.push(<li key={d.id}><a href={'/read'+ d.id}>{d.title}</a></li>)
  }

  return (
    <nav>
      <ol>
          {lis}
      </ol>
    </nav>
  )
}
function Article(props) {
  return (
    <article>
      <h2>{props.title}</h2>
      {props.body}
    </article>
  );
}

function App() {
  let topics = [
    {id:1, title:'html', body:'html is ...'},
    {id:2, title:'css', body:'css is ...'},
    {id:3, title:'js', body:'js is ...'}
  ];

  function onChangeModeHandler() {
    alert('change!');
  }

  function onChangeModeHandler2() {
    alert('change2!');
  }
  return (
    <>
      <Header title="WEB" onChangeMode={onChangeModeHandler} />
      <Header title="WEB2" onChangeMode={onChangeModeHandler2} />
      <Nav data={topics} />
      <Article title="Welcome" body="Hello, React!" />
    </>
  );
}

export default App;

• 문자가 아닌 다른 데이터 타입을 전달하고 싶다면 따옴표가 아닌 {} 중괄호로 전달해줘야 된다.

 

📝 리액트에서 이벤트

<h1><a href="index.html" onClick={onClickHandler}>{props.title}</a></h1>

• 리액트에서 이벤트를 걸어줄 때 onClick처럼 대문자로 적어준다.

 

📝 HTML을 JSX로 변환하기

• JSX란 자바스크립트를 확장한 문법이다.
• 자바스크립트 코드 안에서 UI 관련 작업을 할 때 효과적으로 활용된다.

 

📕 JSX 사용 시 유의할 점

• HTML을 JSX로 변환할 때, 변수 내에 HTML 코드를 저장한다.
• 여러 자식 태그로 구성된 HTML 코드는 반드시 부모 태그 내에 구성되어야 한다.
• 문장의 끝은 세미콜론(;)을 사용!

// HTML
<p>Hello, world!</p>
<p>Nice to meet you</p>

// JSX
const element = (
    <div>
        <p>Hello, world!</p>
        <p>Nice to meet you</p>
    </div>
);

 

📝 함수에 JSX 활용하기

• 함수 내에 중괄호({})를 사용하여 다른 함수 표현식을 추가할 수 있다.

function formatGreeting(name){
  return "Hello" + ' ' + name;
}

function getGreeting(user) {
  return <h1>Hello, {formatName("kim!")}!</h1>;
}

 

📝 컴포넌트

• 컴포넌트란 기능을 단위별로 캡슐화하는 리액트의 기본 단위이다.

 

📕 함수 컴포넌트

//함수 컴포넌트 작성
function Hello() {
  return <h1>Hello, React!</h1>;
}

//컴포넌트 호출
const element = <Hello/>;

//렌더링
ReactDOM.render(element, document.getElementById('root'));

1. 자바스크립트 문법을 활용하여 컴포넌트 정의. 컴포넌트 명은 항상 대문자로 시작
2. 컴포넌트 호출
3. ReactDOM에 렌더링

 

📕 클래스 컴포넌트

//클래스 컴포넌트 작성
class Hello extends React.Component{
  render(){
    return <h1>Hello, React!</h1>
  }
}

//컴포넌트 호출
const element = <Hello/>;

//렌더링
ReactDOM.render(element, document.getElementById('root'))

1. React.Component를 확장하는 클래스 컴포넌트 선언. 컴포넌트 명은 항상 대문자로 시작
2. render() 메소드 내에 기능을 구현
3. 컴포넌트를 호출
4. ReactDOM에 렌더링

 

💡 오늘 깨달은 것

• serviceWorker.unregister();는 앱 배포 시 캐시가 남지 않도록 해준다.
• React는 렌더링 과정을 통해 index.js 파일에서 생성한 엘리먼트를 DOM에 제공한다. 엘리먼트는 React 앱의 가장 작은 단위로 엘리먼트에 화면에 표시될 내용이 기술되어 있다.
  • ReactDOM.render(element, document.getElementById('root'));
• 엘리먼트는 불변 객체다.
  • 불변 객체란, 한번 생성하면 수정이 불가능한 객체를 의미한다.
  • 기존의 엘리먼트를 수정하는 것은 불가능하므로 다시 새로운 엘리먼트를 생성한 후, ReactDOM.render()에 전달해야 한다.
• 컴포넌트를 활용하여 기능을 모듈화 하면
  • 코드 유지보수성이 향상
  • 코드 재사용이 용이
  • 가독성 향상된다.
• 2주 동안 바닐라 JS로 프로젝트 한 뒤에 기능 단위로 잘게 쪼개서 쉽게 컴포넌트 화하는 리액트를 보니까 왜 많은 기업들이 사용하는지 몸소 깨달을 수 있었다.