[React] 리액트 개념 정리 및 실습 1

강의하면서 준비했던 자료들입니다.

 

📌 실습코드는 여기서 확인하세요

https://gitlab.com/tew_books/react_tutorial/-/tree/main/1%EC%A3%BC%EC%B0%A8/code

1주차/code · main · tew_books / react_tutorial · GitLab

 

📌 노션자료입니다. 템플릿 복제 가능하니 복제하시고 본인만의 리액트 개념 노트를 만들어보세요.

https://steadfast-tarantula-527.notion.site/React-747e42a2b3b3431fbea7f97c1a522517

---

 

리액트를 CDN으로 불러와서 html 파일에서 실습할 것입니다.

전반적인 리액트 기초 개념을 익힐 수 있습니다.

 

 

---

html에서 react 맛보기

💫 body 안에 script 추가해보기
CDN링크: https://ko.reactjs.org/docs/cdn-links.html
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

//babel
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>

바디 안에 해당 스크립트 4개를 불러옵니다.

ReactDOM.render(<h1>안녕</h1>, document.getElementById("root"))

type="text/bable" 이라고 적힌 script 안에 이 코드도 하나 추가 시켜주고

body에 id가 root인 <div id="root"></div> 태그도 추가시켜줍니다.

 

id가 root인 div 안에 text node가 안녕인 h1태그를 추가시켜주는 코드입니다.
만약 h1 대신 컴포넌트를 넣는다면 해당 컴포넌트가 렌더링 됩니다.
cra로 생성한 프로젝트를 보면 h1 대신 <App /> 컴포넌트가 들어있습니다.
우리도 저 공간에 app 컴포넌트를 띄워볼 거고 

 

개발자 도구를 켜서보면 id가 root 인 div 태그 안에 해당 태그가 잘 들어가있는 걸 보실 수 있습니다.

 

---

JSX 문법 알아보기(JS + XML)

• return 시 하나의 태그로 감싸져 있어야함 <> </>

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

• 태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아줘야함

const element = <img src={user.avatarUrl} />;

• 중괄호 안에 JavaScript 표현식을 넣을 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

// 중괄호를 사용하여 속성 값에 JavaScript 표현식을 삽입할 수도 있습니다.
<img src={user.avatarUrl}></img>;

// react DOM 은 변경된 부분만 업데이트 합니다.
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

• class → className : 카멜케이스(낙타표기법)로 작성합니다.
• inline style 적용방법 : html 태그 안에 style 적용 할 때는 style={{ fontSize:'14px', color:'red' }} 요롷게
• onClick, onSubmit : 이벤트함수도 역시 카멜케이스로 작성합니다. 하단 예시 참고

// html
<button onclick="activateLasers()">
  Activate Lasers
</button>

// jsx
<button onClick={activateLasers}>
  Activate Lasers
</button>

---

Components, Props

컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트 두개로 나뉩니다.

클래스형 컴포넌트는 잘 안 쓰고 예전 프로젝트들에서 많이 볼 수 있습니다.

함수형 컴포넌트가 생겨나고 리액트 훅들이 도입되면서 이제는 리액트를 만든

페이스북 측에서도 함수형 컴포넌트 사용을 권장하고 있습니다.

 

하기 두개의 예제는

동일한 코드를 클래스형 컴포넌트와 함수형 컴포넌트로 작성한 예제입니다.

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

함수형 컴포넌트

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

---

 

컴포넌트 렌더링

이제는 h1태그를 렌더하는 대신 element 변수에 컴포넌트를 넣어 렌더링 해봅시다

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="길동" />;

ReactDOM.render(
  element,
  document.getElementById('root')
);

컴포넌트를 반복해서 출력하면?

(Welcome을 여러 번 출력하는 App 컴포넌트)

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Sara" />
      <Welcome name="Cahal" />
      <Welcome name="Edite" />
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

welcom 컴포넌트는 지금 h1 태그 한줄을 반환하지만 만약 코드가 아주 길다고 쳤을 때

컴포넌트를 반복해서 쓸 수 있으니 코드도 확 줄고 유지보수도 간편해지겠죠 ?

---

• props 특징

1. props는 부모 → 자식에게 전달 가능.
2. 자식 → 부모로 넘길 땐 콜백함수 전달하는 방법이 있음.

---

조건부 렌더링

두개의 컴포넌트를 상태에 따라 렌더링 해봅시다.

일단 이 컴포넌트를 작성해주세요.

function UserGreeting(props) {
  return <h1>Welcome back!</h1>;
}

function GuestGreeting(props) {
  return <h1>Please sign up.</h1>;
}

사용자의 로그인 상태에 맞게 위 컴포넌트 중 하나를 보여주는 Greeting컴포넌트도 작성해주세요.

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <UserGreeting />;
  }
  return <GuestGreeting />;
}

ReactDOM.render(
  // Try changing to isLoggedIn={true}:
  <Greeting isLoggedIn={false} />,
  document.getElementById('root')
);

Greeting props에 false를 전달하면 <GuestGreeting /> 컴포넌트만 보여지고

true를 전달하면 <UserGreeting /> 만 보여집니다.

---

&& 논리연산자로 렌더링하기

 

논리연산자는 && 기준으로 앞의 조건이 참이면 뒤에 코드가 실행됩니다. 조건이 false면 뒤에 코드가 실행되지않습니다.

즉 조건이 true일 때만 뒤에 구문

<h2>  You have {unreadMessages.length} unread messages. </h2>

이 보여집니다.

function Mailbox(props) {
  const unreadMessages = props.unreadMessages;
  return (
    <div>
      <h1>Hello!</h1>
      {unreadMessages.length > 0 &&
        <h2>
          You have {unreadMessages.length} unread messages.
        </h2>
      }
    </div>
  );
}

const messages = ['React', 'Re: React', 'Re:Re: React'];
ReactDOM.render(
  <Mailbox unreadMessages={messages} />,
  document.getElementById('root')
);

삼항연산자

? 물음표 앞의 조건이 참이면 : 기준으로 앞의 구문 실행되고 거짓이면 뒤에 조건이 실행됩니다.

render() {
  const isLoggedIn = this.state.isLoggedIn;
  return (
    <div>
      The user is <b>{isLoggedIn ? 'currently' : 'not'}</b> logged in.
    </div>
  );
}

---

컴포넌트 만들어보기 (props 전달 연습)_news 폴더 안 index.html 생성

01_section 안에 article을 component로 변경시켜보기

02_<Header />와 <Section/> 을 App 으로 렌더링하기

props.children?? <Box> </Box> 안에 컨텐츠를 삽입하면 어떻게 될까요

03_App 컴포넌트에서 헤더에 props.children 으로 넘겨보기

 

코드는 상단 첨부했던 링크의 news 폴더를 보시면 됩니다.

---

State

직접 state 수정하기 금지

// 클래스형
this.state.comment = 'Hello';

// 함수형
comment = "Hello";

setState 사용하기

// 클래스형
this.setState({comment: 'Hello'});

// 함수형
setComment('Hello');

---

js 로 만들었던 todolist를 리액트로 변경해보는 코드는

상단에 첨부했던 링크에 react-todo.html 을 보시면 됩니다.