- 프레임워크는 그 구조대로 짜야해서 다른 거랑 같이 사용하기가 어렵고
라이브러리는 라이브러리에서 만들어둔 코드를 가져다 쓸 수 있다
- if문은 표현식 아니기 때문에 못쓴다. 삼항연산자는 표현식(값)이다
삼한연산자는 표현식이기 때문에 변수에 담아줄 수 있다.
- 컴포넌트 불러오는 방법( ex. sidebar )
<sidebar /> ㅡ 변수 선언한거 가져올 때
- 아이콘은 i
리액트의 특징
(1) 선언형
(2) 범용성
(3) 컴포넌트 기반
1. JSX
- React에서 UI를 구성할 때 사용하는 문법으로 JavaScript를 확장한 문법입니다.
이 문법을 이용해서 우리는 React 엘리먼트를 만들 수 있습니다
- Babel은 JSX를 브라우저가 이해할 수 있는 JavaScript로 컴파일합니다.
컴파일 후, JavaScript를 브라우저가 읽고 화면에 렌더링할 수 있습니다.
JSX를 사용하면 JavaScript 만으로 마크업(markup) 형태의 코드를 작성하여 DOM에 배치할 수 있게 된다.
ㅡ> CSS, JSX 문법만을 가지고 웹 애플리케이션을 개발할 수 있습니다.JSX에서 변수와 표현식에는 중괄호 {} 를 사용합니다.
JSX 활용
1) 하나의 엘리먼트 안에 모든 엘리먼트가 포함되어야 한다
2) 엘리먼트 클래스 사용 시, className으로 표기
3) 자바스크립트 표현식 사용 시, 중괄호({}) 이용
4) 사용자 정의 컴포넌트는 대문자로 시작
- React 엘리먼트가 JSX로 작성되면 "대문자"로 시작해야 합니다.
소문자로 시작하게 되면 일반적인 HTML 엘리먼트로 인식을 하게 됩니다.
5) 조건부 렌더링에는 삼항연산자 사용
6) 여러 개의 HTML 엘리먼트를 표시할 때, map() 함수를 이용
- map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 합니다.
"key" JSX 속성을 넣지 않으면 리스트의
각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
2. map을 이용한 반복
내장 고차 함수 map에서 배웠던 배열 메서드 map의 특성
- 배열의 각 요소를
- 특정 논리(함수)에 의해
- 다른 요소로 지정(map)합니다.
posts의 요소는 블로그 포스트의 id, title, content로 나눌 수 있다.
이 정보를 브라우저에서 React로 보여주려면 JSX를 활용해서 이 데이터를 적절히 넣어야 합니다.
단순한 문자열에 불과했던 posts의 요소를 HTML 엘리먼트로 이 정보의 구조를 잘 짜 놓은 모습으로 매핑하면 되겠습니다.배열의 각 요소(post)를 특정 논리(postToElement 함수)에 의해 다른 요소로 지정(map) 합니다.
React에서는 위 의사코드를 아래와 같이 적을 수 있습니다.
반복적으로 작성해야 하는 부분만 골라서 배열의 요소로 넣으면 React가 이를 인지하고 모든 요소를 렌더링합니다.const posts = [ { id: 1, title: "Hello World", content: "Welcome to learning React!" }, { id: 2, title: "Installation", content: "You can install React via npm." }, ]; 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>; }
KEY 속성
- React에서 map 메서드 사용 시, key 속성을 넣지 않으면 리스트의 각 항목에 key를 넣어야 한다는 경고가 표시됩니다.
key 속성의 위치는 map 메서드 내부에 있는 엘리먼트 즉, 첫 엘리먼트에 넣어주세요.
- key 속성값은 가능하면 데이터에서 제공하는 id를 할당해야 합니다. key 속성값은 id와 마찬가지로 변하지 않고, 예상 가능하며, 유일해야 하기 때문입니다.
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>; }
3. Component
-
컴포넌트 기반 개발은 웹 애플리케이션에서 각 기능 별로 하나의 컴포넌트를 작성하도록 권장한다.
그래서 컴포넌트 간 의존성이 낮아지고 독립적으로 작동합니다.
하나의 기능 변경 시 다른 컴포넌트를 수정할 필요가 없기 때문입니다.
예를 들어, 원하는 수정 사항에 맞추어 컴포넌트의 위치만 수정해 주거나 재사용할 수 있습니다. -
컴포넌트를 여러개 만들고 조합하면 어플리케이션을 만들 수 있다.
-
각각의 컴포넌트들은 각자 고유의 기능을 가지고 있으면서 UI의 한 부분을 담당하고 있다.
이 컴포넌트들을 모아 복잡한 UI를 구성할 수도 있고
더 나아가 복잡한 어플리케이션도 만들 수 있다.
4. Create Reacte App
create-react-app를 사용한다면 단 하나의 명령 만으로 자신만의 리액트 프로젝트를 시작할 수 있습니다.
- Create Reacte App은 리액트 SPA를 쉽고 빠르게 개발할 수 있도록 만들어진 툴 체인이다.
npx create-react-app 폴더이름[명령어] Create React App 명령어
기타
npx
- npm의 명령어 중 하나 인데 create react 할 수 있다.
package.json에 보면 react-scripts start 랑 npm run start랑 똑같다
npm run start로 리액트 실행
출처 : 유어클래스
