React 웹 개발 시작하기

React 시작하기

• 리액트의 탄생기능이 추가되며 코드가 복잡해지기 시작했고 따라서 이를 효율적으로 개발할 수 있는 React가 등장하였다.
• 마크주커버그는 페이스북을 만들었고 빠르게 성장함에 따라 여러 기능이 추가되었다.
• 나의 첫 리액트 프로젝트리액트 프로젝트를 시작할 수 있다.개발 모드 실행
• npm run start
• npm init react-app <폴더이름>
• 리액트 개발자 도구 살펴보기
• React 개발자 도구를 사용하면 컴포넌트 등 여러 정보를 얻을 수 있다.

React 개발 기초

• 리액트 최신 버전에 대한 안내index.js 파일을 보면 ReactDOM.render가 아닌 ReactDOM.createRoot 함수를 사용하는 코드가 생성된다. 수업의 코드를 그대로 사용하면 개발자 도구 콘솔창에 아래와 같은 경고 메시지가 나타날 수 있다.

  import ReactDOM from 'react-dom/client';
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>안녕 리액트!</h1>);
  

  위 코드처럼 index.js를 수정하면 된다.
• 수업에서 소개된 방법으로 프로젝트를 생성하면 최신 버전의 React가 설치된다.
• 인덱스 파일에서 하는 일

  import ReactDOM from 'react-dom/client';
  
  const root = ReactDOM.createRoot(document.getElementById('root'));
  root.render(<h1>안녕 리액트!</h1>);
  

  ReactDom을 import 하여 render로 JSX문법을 사용해서 html 태그를 root id를 가진 태그에 render시킨다.
• root id를 가진 태그는 index.html에 존재한다.
• index.html이 가장 먼저 열리고 그 다음 index.js가 열린다.
• JSX
  • JS와 html을 같이 쓸 수 있게 해준다.
  • html 문법을 그대로 사용할 순 없다.
  • class 속성의 경우 classname으로 대체된다. (class가 객체를 만드는데 사용됨)
  • label 태그와 함께 사용하는 for 속성의 경우 htmlFor로 대체된다.
  • 이벤트 핸들러도 전부 카멜케이스로 대체된다.
• 프래그먼트이때 div태그를 사용하고 싶지 않다면 fragment 태그로 감싸거나 빈 태그를 이용해도 된다.
• 이는 불필요한 div태그를 줄일 수 있다.
• 리액트에서 jsx코드는 반드시 하나의 태그로 감싸야한다.
• JSX에서 자바스크립트 사용하기

  const product = 'MacBook';
  const model = 'Air';
  const imageUrl =
  '<https://upload.wikimedia.org/wikipedia/commons/thumb/1/1e/MacBook_with_Retina_Display.png/500px-MacBook_with_Retina_Display.png>';
  

  function handleClick(e) {
  alert('곧 도착합니다!');
  }
  

  ReactDOM.render(
  <>
  <h1>{product + ' ' + model} 주문하기</h1>
  <img src={imageUrl} alt="제품 사진" />
  <button onClick={handleClick}>확인</button>
  </>,
  document.getElementById('root')
  );
  

  자바스크립트 문법으로 변수를 선언하고 이를 중괄호 표현식으로 JSX에서 사용할 수 있다.
• import ReactDOM from 'react-dom';
• 컴포넌트변수에 태그를 할당하는 식으로 컴포넌트를 만들 수 있다.컴포넌트를 콘솔에 출력하면 React 객체가 출력된다.
• 위 코드처럼 다른 js파일에 컴포넌트를 정의하고 export하여 다른 js파일에서 사용할 수 있다.
• import diceBlue01 from './assets/dice-blue-1.svg'; function Dice() { return <img src={diceBlue01} alt="주사위" />; } export default Dice;
• Props컴포넌트에도 속성을 지정할 수 있다.Props는 함수의 매개변수처럼 받아서 사용할 수 있다.
• destructure을 이용하여 사용할 수 있고, 기본값을 지정할 수도 있다.
• 이를 Props 라고 부른다.

function Dice({ color = 'blue', num = 1 }) 
{ 
  const src = DICE_IMAGES[color][num - 1]; 
  const alt = ${color} ${num}; 
  return <img src={src} alt={alt} />; 
}

• children이는 태그로 감싸져 있는 내용을 말한다.
• 컴포넌트가 기본적으로 가지는 children이라는 prop이 있다.
• state화면을 변경할 때 state를 사용하면 유용하다.
• 초기값을 전달해주고 값을 변경할 때는 set함수를 사용한다.
• const [num, setNum] = useState(1);
• 참조형 state배열같은 참조형타입을 state로 사용할 때는 spread 문법을 활용해서 만든다.
• const [gameHistory, setGameHistory] = useState([]); //... setGameHistory([...gameHistory, nextNum]);
• 컴포넌트가 좋은 이유유지 보수에 용이함,
• 업무 분담이 용이함
• 반복작업이 줄어듬,
• 리액트가 렌더링하는 방식리액트에서는 수정된 데이터에 한해 리렌더링을 하고 이때 virtual DOM을 사용함
• 변경사항을 Virtual DOM에 모아뒀다가 DOM으로 한번에 보내서 효율적으로 변경사항을 처리할 수 있게 한다.
• 컴퓨터 그래픽스에서 모델링된 데이터를 시각적으로 표현하는 과정
• 디자인을 적용하는 방법과 팁이미지 불러오기인라인 스타일CSS 파일 불러오기클래스네임 사용하기여러 className을 사용할 경우 배열을 이용하면 편하다.classnames 라이브러리
• import classNames from 'classnames'; function Button({ isPending, color, size, invert, children }) { return ( <button className={classNames( 'Button', isPending && 'pending', color, size, invert && 'invert', )}> { children } </button > ); } export default Button;
• function Button({ isPending, color, size, invert, children }) { const classNames = [ 'Button', isPending ? 'pending' : '', color, size, invert ? 'invert' : '', ].join(' '); return <button className={classNames}>{children}</button>; } export default Button;
• import diceImg from './assets/dice.png'; import './Dice.css'; function Dice({ className = '' }) { const classNames = `Dice ${className}`; return <img className={classNames} src={diceImg} alt="주사위 이미지" />; } export default App;
• import diceImg from './assets/dice.png'; import './Dice.css'; function Dice() { return <img src={diceImg} alt="주사위 이미지" />; } export default App;
• import diceImg from './assets/dice.png'; const style = { borderRadius: '50%', width: '120px', height: '120px', }; function Dice() { return <img style={style} src={diceImg} alt="주사위 이미지" />; } export default App;
• import diceImg from './assets/dice.png'; function Dice() { return <img src={diceImg} alt="주사위 이미지" />; } export default App;

React 배포하기

• 빌드하기
  • 빌드:
    • 소스 코드를 처리하여 애플리케이션을 구동하기 위한 최적화된 정적 파일을 생성하는 과정
    • 배포할 때, 빌드된 파일들을 웹 서버에 호스팅하여 사용자들이 접근할 수 있도록 한다.
    • 빌드된 파일은 개발 환경보다 더 빠르게 로딩되며, 성능과 안정성을 향상시킬 수 있다.
  • 빌드 과정:
    1. 코드 번들링(code bundling): 애플리케이션에 사용된 모든 JavaScript, CSS, 이미지 등의 파일들을 번들(bundle)로 묶는다. 이는 초기 로딩 속도를 개선할 수 있다.
    2. 최적화: 코드를 최적화하여 크기를 줄이고, 불필요한 코드를 제거한다. 로딩 속도를 개선할 수 있습니다.
    3. 소스 맵 생성: 소스 맵(Source Map)은 빌드된 파일과 원본 소스 코드 간의 대응 관계를 정의한 맵 파일이다. 디버깅 시 원본 소스 코드에서 오류를 확인할 수 있도록 도와준다.
• npm run build npm serve build
• 웹 사이트 배포하기
  • 클라우드 컴퓨팅(Cloud computing):
    • 인터넷을 통해 컴퓨팅 서비스를 제공하는 기술.
    • IaaS(Infrastructure as a Service), PaaS(Platform as a Service), SaaS(Software as a Service) 등 다양한 서비스 모델 제공

배포할 때 다시 보자

https://www.codeit.kr/topics/getting-started-with-react/lessons/4752

https://www.codeit.kr/topics/getting-started-with-react/lessons/4660