TIL

React

JSX

return <div>안녕하세요</div>;

위와 같이 HTML과 비슷하게 생겼지만 JavaScript이다.
JSX형식으로 코드를 작성하면 바벨이 JavaScript로 바꿔주면서 사용할 수 있게된다.

태그는 항상 닫아줘야한다. 태그안에 내용이 없다면 <div/>형식으로 self closing해주어야한다.

무조건 하나의 태그만 return할 수 있기 때문에

return (
	<div>안녕하세요</div>
    <div>안녕하세요</div>
    )

이런형식으로 코드를 작성하면 에러가 뜬다.

Fragment는 별도의 태그 없이 <> </>이런 형식으로 사용된다.

불필요한 div를 없애기 위해 사용

JSX안에서 javaScript 변수를 보여주기 위해서 {}를 사용한다.

function App() {
  const name = 'yong';
  return (
    <>
      <div>{name}</div>
    </>
  );
}

클래스네임을 줄거나 JSX안에서 style을 적용시킬때는 camelCase를 적용 시켜준다.
(클래스네임은 HTML과 다르게 class="" 가 아닌 className=""을 사용한다.)

---

props

부모의 속성값을 가져와서 사용하는 것!

props는 이뮤터블한 값이다. 바꾸려고 하면 안되다.

자식 컴포넌트에서 부모 prop를 받으려면

let Hello = function(props)
let Hello = function({name})

요런식으로 받아야한다.

Hello.defaultProps = {
	name : '이름 없음'
}

위 처럼 defaultProps를 사용해준다면 부모 컴포넌트 안에있는 자식태그에 name이라는 속성 값이 없다면 '이름 없음'으로 출력된다.(말 그대로 디폴트)

조건부 랜더링을 할 때,

삼항연산자를 사용해도 되지만 &&연산자가 더 편하다.

{1===1 ? 'yes' : 'no'}
{1===1 && 'yes'} 아닐경우 값이 나오지 않음

state

바뀌는 값으로 설정