반응형 Front/React33 [React] 댓글 Component 만들기 ✔ Comment Component 만들기 src > chapter_05 > Comment.jsx 를 만든다. import React from "react"; function Comment(props) { return ( 제가 만든 첫 컴포넌트입니다. ); } export default Comment; src > chapter_05 > CommentList.jsx 를 만든다. import React from "react"; import Comment from "./Comment"; function CommentList(props) { return ( ); } export default CommentList; 화면에 렌더링하기 위해 index.js 수정 npm start ✔ Comment Component.. 2023. 4. 14. [React] Component 생성 / 렌더링 / 합성과 추출 Function Component function Welcome(props) { return 안녕, {props.name}; } Class Component class Welcome extends React.Component { render() { return 안녕, {this.props.name}; } } Function Component 와 Class Component 의 가장 큰 차이점 : Class Component는 React 의 모든 Component 가 React.Component 를 상속받아서 만든다. (상속: 객체지향 프로그래밍에서 나오는 내용으로, 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식클래스를 만드는 방법) Component 의 이름 : Component 의 이름은 항상 .. 2023. 4. 14. [React] Components and Props Component : 작은 component 들이 모여서 하나의 component 를 구성하고 그것들이 전체 페이지를 구성한다. React component 는 만들고자 하는 대로 props(속성)을 넣으면 해당 props 에 맞춰 화면에 나타날 element 를 만들어준다. Props : Property 의 줄임말로 React Component 의 속성을 나타낸다. Component 에 전달할 다양한 정보를 담고 잇는 자바스크립트 객체이다. 눈에 보이는 글자나 색깔 등의 속성을 바꾸고 싶을 때 사용한다. ✔ Props 의 특징 - Read-Only : 읽기 전용 (값을 변경할 수 없다.) 다른 Props 의 값으로 elements 를 생성하려면 새로운 값을 컴포넌트에 전달하여 새로 Element 를 생.. 2023. 4. 14. [React] 시계 만들기 현재 시간을 출력하는 간단한 Clock 컴포넌트 import React from "react"; function Clock(props) { return ( 안녕, 리액트! 현재 시간: {new Date().toLocaleTimeString()} ); } export default Clock; 만든 Clock 컴포넌트를 화면에 랜더링하기 위해 index.js 를 수정한다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_0.. 2023. 4. 14. [React] Elements Element : 리액트 앱을 구성하는 가장 작은 블록들 function Button(props) { return ( {props.children} ) } function ConfirmDialog(props) { return ( 내용을 확인하셨으면 확인 버튼을 눌러주세요. 확인 ) } ConfirmDialog 컴포넌트가 Button 컴포넌트를 포함하고 있다. // ConfirmDialog 컴포넌트의 elements { type: 'div', props: { children: [ { type: 'p', props: { children: '내용을 확인하셨으면 확인 버튼을 눌러주세요.' } }, { // Button 컴포넌트의 elements 를 형성해서 합치게 된다. type: Button, props: {.. 2023. 4. 14. [React] JSX 코드 작성 ✔ create-react-app TERMINAL에 'npx create-react-app my-app' 을 입력한다. 완료되면 cd my-app 을 통해 my-app 안으로 들어간 다음, npm start 를 입력하여 시작한다. ✔ my-app > src > chapter_03 > Book.jsx : JSX 파일 만들기 import React from "react"; function Book(props) { return ( {`이 책의 이름은 ${props.name}입니다.`} {`이 책은 총 ${props.numOfPage}페이지로 이루어져 있습니다.`} ); } export default Book; Book.jsx ✔ my-app > src > chapter_03 > Library.jsx : Boo.. 2023. 4. 14. [React] JSX 사용법 JSX 사용법 : JavaScript 코드 + XML / HTML ... XML / HTML {JavaScript 코드} ... XML / HTML 예제 1 const name = '예은'; const element = 안녕, {name}; ReactDOM.render( element, document.getElementById('root') ); 중간에 사용된 {name} 이 name 이라는 JavaScript 의 변수를 사용하기 위해서 중괄호를 사용하여 표현한 것이다. 예제 2 funtion formatName(user) { return user.firstName + ' ' + user.lastName; } const user = { firstName: 'Yeeun', lastName: 'Oh' };.. 2023. 4. 13. [React] JSX 의 장점 코드가 간결해진다. // JSX 사용함 Hello, {name} // JSX 사용 안함 React.createElement('div', null, `Hello, ${name}`); 가독성이 향상된다. : 코드를 작성할 때 뿐만 아니라, 유지보수도 쉬워지며 버그를 발견하기 쉬워진다. injection Attacks 방어로 보안성이 올라간다. const title = response.potentiallyMaliciousInput; // 이 코드는 안전합니다. const element = {title}; 2023. 4. 13. [React] JSX JSX : A syntax extension to JavaScript (자바스크립트의 확장문법) JavaScript + XML/HTML JSX 코드 const element = Hello, world!; JSX 의 역할 : JSX 는 내부적으로 XML/HTML 코드를 JavaScript 로 변환하는 과정을 거치게 된다. 그렇기 때문에 실제로 우리가 JSX로 작성해도, 최종적으로는 JavaScript 가 나오게 되는 것이다. 여기서 JSX 코드를 JavaScript 로 변환하는 역할을 하는 것이 React 의 createElement 라는 함수인 것이다. JSX 를 사용한 코드 class Hello extends React.Component { render() { return Hello {this.prop.. 2023. 4. 13. 이전 1 2 3 다음 반응형
