[부트캠프 React] 210831 리액트 기초 복습(1)
📌 들어가기 전에...
React에 대한 감회는 누구보다 남다른편이다. React는 정말 정말 낯설다. 나도 나름 웹디자이너로 일해서 html css는 많이 만져봤고 자바스크립트는 코드를 짤 줄은 몰랐어도 자바스크립트 코드는 많이 보았다. 하지만 리액트는 정말 낯설기도 낯설뿐더러 고차함수 마냥 외계어 같다. 많이 접해보고 계속 코드를 직접 짜보는 것 밖에는 답이 없지만..😂
일단 해봐야지...!
목표가 있다. 그러니까 일단 복습한다.
📌 React 무엇인가?
리액트는 선언형이다.
한 페이지를 보여주기 위해 HTML/CSS/JS를 나눠서 작성하는게 아니다. 하나의 파일에 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 임.
리액트는 컴포넌트 기반이다.
하나의 기능구현을 위해 여러종류의 코드를 묶어둔 컴포넌트를 기반으로 개발. 컴포넌트로 분리하면 서로 독립적이며 재사용 가능.(컴포넌트는? 독립적인 소프트웨어 모듈)
ex) 장바구니와 그 리스트들 을 떠올려보기
리액트는 범용성이 높다
자바스크립트 프로젝트 어디에든 적용가능. 리액트 네이티브로 모바일 개발도 가능.
📌 JSX 무엇인가?
자바스크립트를 확장한 문법이다. CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있다. JSX를 사용하면 JavaScript만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 되는 것. jsx로 코드를 보다 명시적으로 작성할 수 있게됨.
예시)
import "./styles.css"; const user = { firstName: "HTML", lastName: "DOM" }; function formatName(user) { return user.firstName + " " + user.lastName; } var heading = document.createElement("h1"); heading.textContent = `Hello, ${formatName(user)}`; document.body.appendChild(heading);
jsx 없이도 react요소를 만들 수는 있으나 가독성이 떨어진다는 단점이 있다.
📌 JSX 문법(또는 규칙)
1) 하나의 엘리먼트 안에 모든 엘리먼트 포함
JSX에서 여러 엘리먼트를 작성하고자 하는 경우, opening tag와 closing tag로 감싸주기
<div> <h1>Hello, World!</h1> </div> <div> <h1>I'm human</h1> </div> (X)
<div> <div><h1>Hello, World!</h1></div> <div><h1>I'm human</h1></div> </div>(O)
2) 엘리먼트 클래스 사용시, className으로 표기
속성 지정시 className으로 표기한다. 만약 class로 표기하게 된다면, html 클래스 속성 대신 자바스크립트 클래스로 받아들이기 때문에 주의
3) 자바스크립트 표현식 사용시 중괄호 사용
function App() { const name = 'Josh Perez' return ( <div> Hello! {name} </div> ); }
4) 사용자정의 컴포넌트는 대문자로 시작
function Hello() { return <div>Hello!</div> } function HelloWorld() { return <Hello/ >; }
5) 조건부 렌더링에는 삼항 연산자 사용
<div> { (1+1 === 2) ? (<p>정답</p>) : (<p>탈락</p>) } </div>
이게 무슨 뜻인지 모르겠어서 구글링을 해보았다. 역시 구글은 정말 최고의 사수다.
{ 조건 ? 조건이 참일 때 실행할 명령문 : 조건이 거짓일 때 실행할 명령문 }
6) 여러개의 HTML 엘리먼트를 표시할 때 map()함수를 이용
const posts = [ {id : 1, title:'first', content:'Welcome to learnig'} {id : 2, title:'second', content:'Nice to see ya'} ] function Blog () { const content = posts.map((post) => <div key = {post.id}> <h3>{post.title}</h3> <p>{post.content}</p> </div> ); return ( <div> {content} </div> ); } }
map() 함수가 쓰인 가운데 부분 집중!
📌 리액트에서의 Map()함수?
리액트로 블로그를 만든다고 가정했을 때, 데이터가 두개(그러니까 포스팅이 두개)라면 간단하게 하드코딩해버리면 된다. 하지만 데이터의 양이 100개 이상이라면 하드코딩은 비효율적이다. 그러므로 map() 메서드를 써야한다.
function Blog() { const postToElement = (post) => ( <div> <h3>{post.title}</h3> <p>{post.content}</p> </div> ); const blogs = posts.map(postToElement); return <div className="post-wrapper">{blogs}</div>; }
또는 아래와 같이 쓸 수 있다.
function Blog() { // postToElement라는 함수로 나누지 않고 아래와 같이 써도 무방. const blogs = posts.map((post) => ( <div key={post.id}> <h3>{post.title}</h3> <p>{post.content}</p> </div> )); return <div className="post-wrapper">{blogs}</div>; }
📌 Component?
컴포넌트는 쉽게 생각하면 기능이다. 모든 리액트 어플리케이션은 최소 한개 이상의 컴포넌트를 가지고 있다. 예시로 유튜브를 생각해보자
검색창은 헤더부분 그리고 그 아래는 컨텐트리스트 라고 생각해보면 아래와 같이 구성된다.
Author And Source
이 문제에 관하여([부트캠프 React] 210831 리액트 기초 복습(1)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jinlee122700/부트캠프-React-210830-리액트-기초-복습저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)