[5주차] 리액트입문: 컴포넌트 만들기, JXS, 부모/자식 컴포넌트

리액트 컴포넌트는 props라는 임의값을 input 으로 받고, react element로 반환합니다. 
**React Element : 화면에 어떻게 표시되는지 기술하는 것

React component (props) {

  return React Element ;

}

---

리액트 컴포넌트를 표현하는 방식은 1) 함수형 2)클래스형 이 있지만, 함수형을 가장 많이 씁니다.

 

컴포넌트 함수형의 구조

// import 영역
import logo from './logo.svg';
import './App.css';


function App() {
  // 자바스크립트 쓰는 영역
  return (
  // JSX 쓰는 영역
  );
}


// export 영역
export default App;

 

컴포넌트 이름 :  대문자로 시작하는 카멜케이스 ex. ComeFolder

폴더 이름 : 소문자로 시작하는 카멜케이스 ex. comeFolder

 

---

JSX

• JSX ( JavaSciprt + html )  쟉스 라고 불리우기도 한다. 마치 html 문서처럼 생겼다.
• JSX 안에서는 js (중괄호 사용) 와 html 을 모두 쓸 수 있다. 

import React from 'react'

export default function App() {
  const a = 7;
  const b = 10;
  return <div>안녕하세요, 제 나이는 {a + b}입니다.</div>;
}

• JSX 안에서 어떤 태그에 스타일을 부여 : key-value pair 로 이루어져 있는 객체를 js 문법 {} 안에 넣어준다.
• JSX 안에 있는 태그에 속성 부여 (소문자카멜케이스)

import logo from './logo.svg';
import './App.css';

function App() {
  return (
       <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
  );
}

export default App;

 

 

[5주차] 리액트입문: JXS 문법

---

실전연습

: 문구 아래 버튼을 넣고, 버튼을 누르면 alert 창 나오게 하기

 

 

import React from 'react';
function App() {
  
  // <---- 자바스크립트 영역 ---->
  const onclickHandler = () => {
  	alert("클릭!");
  }
  
  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
   <p>이것은 내가 만든 App 컴포넌트입니다.</p>
   <button onClick={onclickHandler}>클릭!</button>
    </div>
  );
}

export default App;

 

---

부모-자식 컴포넌트

컴포넌트 안에 컴포넌트를 넣고싶을 때는?

=> < /> 를 이용해 자식 컴포넌트 이름을 넣어준다.

import React from 'react';

function Child() {
  return <div>나는 자식입니다.</div>; //return 문이 한줄 이상인 경우에는 ()로 감싸줘야 한다. // return 문에는 tag 가 하나여야 한다. 그 안에 자식을 넣으면서 다른 tag를 추가하는것은 가능하다.
}

function App() {
  return (<Child />);
}

export default App;

** return 문이 한줄 이상인 경우에는 ()로 감싸줘야 한다.

** return 문에는 tag 가 하나여야 한다. 그 안에 자식을 넣으면서 다른 tag를 추가하는것은 가능하다.

 

 

실전예시

import React from 'react';

const Son = () => {
  return <div>연결성공</div>;
}

const Mother = () => {
  return <Son />;
}

const Grandpa = () => {
  return <Mother />;
}

function App() {
  return <Grandpa />;
}

export default App;