리액트 기본 문법

시작하기

1. 리액트 문법으로 쓰는 변수는 괄호로 바로 시작하고, (HTML문법처럼 보이는) JSX을 바로 쓸 수 있다. 이 JSX 문법은 바벨이 js로 번역해준다
   • 뿐만 아니라, 함수로 생성한 리액트 태그를 사용할 수 있다.
2. JSX (HTML문법) 사이에 변수를 써서 동적으로 할당하고 싶으면 {} 대괄호로 묶어서 변수명을 삽입한다.

엘리먼트

1. 리액트 엘리먼트로 바꾸기
   HTML에 들어있던 코드를 script 태그 내부에 변수(title, form)로 할당하고, 렌더할 가장 최상단 요소(app)에 {변수명}으로 삽입해줌.

   <전>
   

   <후>
   
   

• 다만, title(하나의 엘리먼트)은 () 없이 바로 (html코드처럼 보이지만) JSX내용을 선언하고, form, app은 ()가 들어가는데.. 아 괄호 없어도 react 동작하긴 하는데, 여러줄일때는 편의상 삽입된거 같기도하다. 다만 엘리먼트 하나하나는 꼭 한 묶음으로 묶여있어야 에러가 안 난다. (아니면 Fragment 태그인가를 쓰기도 함)

컴포넌트

중복되는 요소를 줄이고, 이미 만들어둔 컴포넌트를 이용해 효율적이고 일관된 UI UX를 생성할 수 있다.

    function sayHello(name) {
      return '안녕하세요, +' + name;
    };

	sayHello("손님");       // 사용 1 : 함수처럼
	<sayHello name="손놈" />  // 사용 2 : 태그처럼, 닫는 태그 있어야됨.
    const app = (
    	<sayHello>hi</sayHello>  //사용 3 : 별도 설명
    )

사용 3은 인자를 props로 받는 방법인데, 이렇게 쓰려면 컴포넌트 선언할 때 인자를 props로 받고, 요소를 props.children으로 써야함.

const app = (
	<div>
    	<Title>1번째 고양이 가라사대</Title>
    </div>
	)

혹은 태그 두개 사이에 안 넣고, 속성으로 쓴다면 컴포넌트 내부에서 props.속성명으로 인자를 사용하면 된다.

// app 내부, 사용하는 부분
const app = (
	<div>
    	<Form img = "소스링크"/>
    </div>
	)

• Form 컴포넌트 선언부

1. props.속성명

   // Form 컴포넌트 선언부
   const Form = (props) => {
       return (
         <div>
           <img src={props.img}/>
         </div>
       )
   }

2. {속성명}

   // Form 컴포넌트 선언부
   const Form = ({img}) => {
       return (
         <div>
           <img src={img}/>
         </div>
       )
   }

스타일

이벤트