리액트 들어가기 앞서 살펴보기

리액트는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다.

https://ko.reactjs.org/docs/create-a-new-react-app.html

라이브러리는 자동차 바퀴, 헤드라이트, 에어백 같이 ‘부품’같은 존재로, 프로그램 제작시 필요한 기능이다. 대표적으로는 jQuery가 있음!

프레임워크는 자동차 ‘프레임’같은 존재로, 프로그램의 기본 구조(뼈대) 구성을 도와주고, 원하는 기능 구현에만 집중해서 빠르게 개발할 수 있도록 기능을 제공해준다.
대표적으로는 Angularjs가 있음!

리액트 배우기.
create-react-app은 react를 배우기에 간편한 환경입니다. 그리고 시작하기에 최고의 방법은 새로운 싱글페이지 애플리케이션 입니다.

시작해봅시다!

npx create-react-app my-app
cd my-app
npm start

https://codesandbox.io/s/new?file=/src/styles.css
=> 실습하러가기!

https://ko.reactjs.org/docs/glossary.html#single-page-application

그럼 Node.js는 무엇인가요?
컴퓨터가 실행되는 동안, 프로세스나 프로그램을 위한 소프트웨어를 제공하는 자바스크립트 엔진의 종류로 자바스크립트 런타임이라고 합니다.
Node.js의 패키지 생태계로는 npm이 있습니다. (Node package manager)

JSX는 자바스크립트의 확장버전.
리액트를 사용하기 위해서, JSX 문법이 포함되어있으면 해당 파일을 정규 자바스크립트 문법으로 변환시키는 컴파일 과정이 필요합니다.

Attribute
쉽게말해서 클래스네임에 속성 주기.

Html : class=“className”
jsx : className=“className”

Self-closing tag
JSX에서는 어떤 태그라도 셀프클로징이 가능합니다😆

Html : <div></div> , <input>
jsx : <div /> <input />

Nested JSX
중첩된 요소를 만드려면 ()소괄호로 감싸주세요.

Html :

<div>
	<div>
		contents
	</div>
</div>

jsx :

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

Rendering
코드가 눈으로 보여질 수 있도록 ReactDOM.render함수를 사용해보자.
첫번째 인자에서는 JSX로 React요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)룰 전달합니다.

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);

Component와 Props
프론트앤드 개발에서 Component 라는 단어를 많이 사용합니다. component(컴포넌트)란 재사용 가능한 UI 단위입니다.
로그인, 회원가입 페이지를 만들 때 input 태그가 여러개 필요하셨죠? 그래서 signup.html, login.html 에서 input 요소를 위해 똑같은 html코드를 복사 붙여넣기 하고..input 디자인을 위해 signup.css, login.css에도 각각 같은 css를 작성했습니다.

이럴 때 동일 코드가 반복되는 부분을 하나의 component로 만들어서 같은 디자인의 input이 필요한 곳마다 재사용할 수가 있습니다. input 디자인을 바꿀때 css 한줄만 수정하면 로그인, 회원가입, 내정보수정 페이지에 바뀐 디자인이 모두 반영되게끔요.

JSX로 하나의 컴포넌트에 필요한 html, css, js(validation check)를 모두 합쳐서 만들 수 있습니다.

컴포넌트는 함수랑 비슷합니다. 컴포넌트도 input을 받아서 return 할 수 있습니다. React 컴포넌트에서는 input을 props라고 말하고 return은 화면에 보여져야할 React요소가 return됩니다.

Component 사용
프론트앤드 개발에서 Component 라는 단어를 많이 사용합니다. component(컴포넌트)란 재사용 가능한 UI 단위입니다.

// 1. Welcome 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 2. App 컴포넌트 정의
function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

// 3. 화면에 React 요소 그려주기
ReactDOM.render(
  <App />,
  document.getElementById('root')
);

어트리뷰트, 컴포넘스, 프롭스... 아직은 많이 헷갈리는 단어들이네요 😅 다양한 실습을 하면서 조금더 살펴보도록 해요