- 선언형이다.
- 컴포넌트 기반이다.
- 범용성이 좋다.
왜 명시적일까? JavaScript의 문법과 HTML의 문법을 동시에 이용 가능하므로 기능과 구조를 한번에 볼 수 있다!
컴포넌트란 하나의 기능을 구현하기 위해 여러 종류의 코드를 묶은 것인데, 유튜브를 예를 들자면, 서치하는 곳과 콘텐츠로 나눌 수 있다. 이렇게 컴포넌트로 분리하면 독립적이고 재사용이 가능하다. 또 유지보수가 쉬워진다.(만약에 위치를 바꾼다면 그 컴포넌트의 위치만 바꾸면 되기 때문!)
yes! 👌
yes! 👌
간단하게 감탄사가 나오는 랜덤 페이지를 만들어보았다. 활용한 코드이다.
JSx를 쓸 때에는 규칙이 있다.
- 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다. 여러 엘리먼트를 반환할 경우,
opening tag
와closing tag
로 감싸주어야 한다!<div> // opening tag <div>첫번째</div> <div>두번째</div> </div> // closing tag 이렇게!
- CSS class를 지정할 때에는 꼭!
className
으로 표기해 줄 것! (안 그럼 오류가 뜬다!)<div className="~~~">내용</div>
- JS 표현식을 사용하려면 중괄호
{}
를 이용해야 한다!const name = "~~~" return <div>~~~{name}~~~</div>
- 사용자 정의 컴포넌트는 대문자로 시작해야 한다! (내가 함수를 만든다던가 할때 꼭 이름을 대문자로 시작해주기)
- 조건부 랜더링은
if
가 아니라삼항연산자
를 사용하자!
아래는 유저의 이름이 'hacker'인 지 확인하고, 'hacker'가 맞으면 className에 'username-purple'를, 아니라면 'username'을 전달하는 식이다.import "./styles.css"; import { dummyTweets } from "./dummyData"; // 데이터를 불러온다. const App = () => { return ( <ul className="tweets"> {dummyTweets.map((tweet) => { const isHacker = tweet.username === 'hacker' // 'hacker'인지 확인 const tweetUserNameClass = isHacker ? 'username-purple' : 'username'; // 삼항연산자로 변수에 할당 return ( <li className="tweet" key={tweet.id}> {<span className={tweetUserNameClass}> // 변수를 가져오는 거니까 {}안에 넣기 {tweet.username}</span>} </li> );})} </ul> );};
- 여러 개의 HTML 엘리먼트를 표시할 때
.map()
함수를 이용한다! (꼭 꼭 처음key
값에 jsx고유의 속성을 넣어야 한다. //진짜진짜 최후에 인덱스 값을 넣는다.)const posts = [ { id: 1, title: "TIL : 1", content: "Welcome" }, { id: 2, title: "TIL : 2", content: "Hello" }, { id: 3, title: "TIL : 3", content: "Nice to meet you" } ]; export default function Blog() { const MakeList = posts.map((obj) => { return <div key={obj.id}> // 꼭 key값을 넣어주어야 한다! <h3>{obj.title}</h3> <p>{obj.content}</p> </div> }); return ( <div> {MakeList} // 중괄호로 감싸기 </div> ); }
이러면 post 배열안의 배열이 차례로
<div>~</div>
안에 올라가게 된다.
yes! 🙌
omg... yes! 👍
레고를 생각하면 비행기를 조립한다고 할때, 왼쪽 날개, 오른쪽날개 ... 이렇게 부품별로 만들면 나중에 합치기만 하면 된다.
yes! 👏
Angular, Vue, Svelte
useState
, props
의 개념을 알고 적용해 보았다. 휴파님께서 보여주시고 바로 지워서 구현하라고 해서 조금 당황했지만... 역시 직접 써 봐야 더 잘 알게 되는 것 같다.😆👌