React Component

2JE0·2022년 1월 1일
0

React

목록 보기
2/17
post-thumbnail

1. Why React?

  • 리액트가 나오게 된 배경 : 웹 앱을 만들 때 리액트가 없이도 만들 수 있다. 그러나 우리가 프로그래밍을 할 때 함수 단위로 프로그래밍을 하여 재사용성 과 유지보수성 을 올리듯, 웹을 개발함에 있어서도 함수단위로 코드를 짤 수 있게 해주는 자바스크립트 라이브러리이다.

2. Start React

  • Node.js 설치하기
  • npx creat-react-app 폴더이름
    cd 폴더이름
    npm start
  • vscode 터미널로 가서 npm install

3. React 프로젝트 분석

//App.js
import ReactDOM from 'react-dom';

import './index.css';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));
  • import 할 때 서드파티 라이브러리나 js 파일은 .js를 빼 준다.
    (ex. import App from './App')
  • <App />이라는 컴포넌트 사용됨
  • html파일은 내용이 비어있고 div id='root'를 찾아가서 렌더링 함
//index.js
function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;
  • index.js는 처음으로 시작할때 읽어오는 파일
  • 일반적인 js 문법은 아니지만 JSX라는 변형된 형태이기 때문에 사용 가능
  • 하나의 파일에 하나의 요소만 있다면 export default App;으로 내보내기 가능

4. JSX

다음 스크린샷에 보이는 함수는 자바스크립트 코드가 아닌데 웹에서 브라우징 할때 리액트에서 함수를 변형해주어 개발자들이 편하게 코드를 쓸 수 있게 해준다.

  • 개발자 도구를 통해서 본 App() 함수

5. React 작동방식

  • 리액트를 써야 하는 이유와도 연관이 있다. 다음 코드는 간단한 글자를 화면에 보여주는 코드이다.
function App() {

  return (
    <div>
      <h2>Let's get started!</h2>
    </div>
  );
}

export default App;
  • 만약 여기서 리액트가 아니라 HTML로 이 글자를 보여주려고 했다면 다음과 같은 코드가 필요했을 것이다. 
  const para = document.createElement('p');
  para.textContent = 'This is also visible';
  document.getElementById('root').append(para);
  • 이런 코드를 쓰기 편하도록 리액트에서 코드를 변환하여 주는 것이다.

6. 첫 Component 만들기

  • 새로운 컴포넌트를 만들기 위해서 새로운 파일을 생성해준다. 리액트에서 컴포넌트를 자바스크립트 함수일 뿐이다.
    ExpendItem.js
function ExpendItem() {
  return <h2>Expend item!</h2>;
}

export default ExpendItem;
  • 이렇게 만들면 컴포넌트 하나가 생성된다. 이제 이 컴포넌트를 내보내기(export default ExpendItem;) 해주고 App.js에서 가져오기 해준다.
  • 한개의 파일에 한개의 함수가 있도록 하는것이 기본적이다.
  • 소문자로 시작하는 태그는 HTML 요소를 나타내고, 대문자로 시작하는 태그(컴포넌트)는 사용자가 정의한 요소를 나타낸다.
import ExpendItem from "./component/ExpendItem";

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
      <ExpendItem></ExpendItem>
    </div>
  );
}

export default App;

7. 복잡한 JSX 코드

  • 컴포넌트는 하나의 최상위 태그로 구성되어있어야한다.

  • return 안의 코드를 ()괄호로 감싸주면 HTML 코드처럼 가독성을 높힐 수 있다.
  • 자동 줄맞춤 단축키를 활용하자 Shift+Alt+F Ctl+K+F
function ExpendItem() {
    return (
        <div>
            <div>Jan 1st 2022</div>
            <div>
                <h2>React component guide</h2>
                <div>My blog 2JE0</div>
            </div>
        </div>
    );
}

export default ExpendItem;

8. css 스타일링

  • ExpendItem.css 파일 생성하기
    • 일반적인 css코드와 똑같이 작성

  • ExpendItem.js 파일에서 import 해주기
    • import "./ExpendItem.css";

  • class 추가해주기 HTML 에서 class를 추가하는것과는 다름
    • HTML 에서는 <div class="expense-item"> 와 같이 했다면
    • JSX에서는 <div className="expense-item"> 와 같이 해야함
import "./ExpendItem.css";

function ExpendItem() {
  return (
    <div className="expense-item">
      <div>Jan 1st 2022</div>
      <div className="expense-item__description">
        <h2>React component guide</h2>
        <div className="expense-item__price">$294.67</div>
      </div>
    </div>
  );
}

export default ExpendItem;

9. 동적 데이터 출력

자바스크립트 언어임에도 불구하고 아직까지 자바스크립트 문법을 사용하지는 않았다 (함수 표현하는것을 제외하고는)

그리고 데이터들이 모두 하드코딩 되어있는데, 실제로 하드코딩으로 컴포넌트를 만든다면 재사용이 불가능할 것이다.
따라서 이번에는 자바스크립트 코드를 통해서 동적으로 데이터를 출력 해본다.

  • 함수 안에서 { } 중괄호를 사용하면 자바스크립트 코드를 사용할 수 있다. 
import "./ExpendItem.css";

function ExpendItem() {
  const expendDate = new Date();
  const expendTitle = "React component guide";
  const expendPrice = 294.67;
  return (
    <div className="expense-item">
      <div>{expendDate.toISOString()}</div>
      <div className="expense-item__description">
        <h2>{expendTitle}</h2>
        <div className="expense-item__price">${expendPrice}</div>
      </div>
    </div>
  );
}

export default ExpendItem;

10. Props

위의 코드는 동적으로 데이터를 출력하지만, 동적으로 출력하는 데이터 또한 const 변수로 데이터가 고정되어 있다.
컴포넌트를 재사용하기 위해서 형태는 고정되어있지만, 데이터를 바꿀수 있는 문법이 필요한데 그것이 바로 props이다.

//App.js
import ExpendItem from "./component/ExpendItem";

function App() {
  const expenses = [
    {
      id: "e1",
      title: "Toilet Paper",
      amount: 94.12,
      date: new Date(2020, 7, 14).toISOString(),
    },
    {
      id: "e2",
      title: "New TV",
      amount: 799.49,
      date: new Date(2021, 2, 12).toISOString(),
    },
    {
      id: "e3",
      title: "Car Insurance",
      amount: 294.67,
      date: new Date(2021, 2, 28).toISOString(),
    },
    {
      id: "e4",
      title: "New Desk (Wooden)",
      amount: 450,
      date: new Date(2021, 5, 12).toISOString(),
    },
  ];
  return (
    <div>
      <h2>Let's get started! </h2>
      <ExpendItem
        title={expenses[0].title}
        amount={expenses[0].amount}
        date={expenses[0].date}
      ></ExpendItem>
      <ExpendItem
        title={expenses[1].title}
        amount={expenses[1].amount}
        date={expenses[1].date}
      ></ExpendItem>
      <ExpendItem
        title={expenses[2].title}
        amount={expenses[2].amount}
        date={expenses[2].date}
      ></ExpendItem>
      <ExpendItem
        title={expenses[3].title}
        amount={expenses[3].amount}
        date={expenses[3].date}
      ></ExpendItem>
    </div>
  );
}

export default App;


//component.js
import "./ExpendItem.css";

function ExpendItem(props) {
  return (
    <div className="expense-item">
      <div>{props.date}</div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpendItem;

11. 일반 js코드 추가(날짜 로직)

이전의 코드는 날짜가 다음 사진의 형태로 되어있어서 읽기가 힘들었다.
따라서 컴포넌트 안에서 날짜에 대한 변수를 js 문법을 통해서 선언해준다.

import "./ExpendItem.css";

function ExpendItem(props) {
  const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();
  return (
    <div className="expense-item">
      <div>
        <div>{year}</div>
        <div>{month}</div>
        <div>{day}</div>
      </div>
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </div>
  );
}

export default ExpendItem;

12. 컴포넌트 분할하기

위의 코드에서 날짜 컴포넌트를 추가하니 한 파일의 크기가 커졌다.
따라서 ExpendItem 컴포넌트를 두개로 분리해 보려고 한다.

  1. ExpendDate.js 파일 생성
  2. 변수 옮기기
    다음 변수들을 ExpendDate.js로 옮겨준다.
  const month = props.date.toLocaleString("en-US", { month: "long" });
  const day = props.date.toLocaleString("en-US", { day: "2-digit" });
  const year = props.date.getFullYear();
  1. HTML 태그 옮기기
    다음코드도 ExpendDate.js로 옮겨준다.
    <div>
      <div>{year}</div>
      <div>{month}</div>
      <div>{day}</div>
    </div>

  1. 가져오기 내보내기
    ExpendItem.js 파일에 import문을 추가해준다.
    import ExpendDate from "./ExpendDate";

  2. props
    ExpendDate.js 의 함수 인자에는 props가 들어가야하고
    ExpendItem.js 안에 컴포넌트를 추가하고 props를 넣는다.

<ExpendDate date={props.date} />

  1. 스타일링 추가하기
    import "./ExpendDate.css";

  2. 컴포넌트 안에 내용이 없을 때
    <ExpendDate></ExpendDate> 대신에 <ExpendDate /> 을 쓴다.

13. Expenses 컴포넌트 분할

//Expenses.js
import ExpendItem from "./ExpendItem";
import "./Expenses.css";

function Expenses(props) {
  return (
    <div className="expenses">
      <ExpendItem
        title={props.data[0].title}
        amount={props.data[0].amount}
        date={props.data[0].date}
      />
      <ExpendItem
        title={props.data[1].title}
        amount={props.data[1].amount}
        date={props.data[1].date}
      />
      <ExpendItem
        title={props.data[2].title}
        amount={props.data[2].amount}
        date={props.data[2].date}
      />
      <ExpendItem
        title={props.data[3].title}
        amount={props.data[3].amount}
        date={props.data[3].date}
      />
    </div>
  );
}

export default Expenses;

App.js 파일을 간소화 하기 위함 

//App.js
  return (
    <div>
      <h2>Let's get started! </h2>
      <Expenses data={expenses} />
    </div>
  );

14. children props

<Card></Card> 태그 안에 내용을 넣는 wrapper container를 만들수 도있다.

  • wrapper container component 안에 props를 이용하여 props.children 을 사용하면 태그 안에 들어가 있는 내용들을 감쌀 수 있다.

  • 그런데 그렇게 하게 되면 <Card className = 'card'></Card> 처럼 클래스를 중복으로 사용할 수 없게 되는데 그럴때의 솔루션이 다음과 같다.

  • const classes 라는 변수를 선언한 후에 적용하고 싶은 클래스와 안쪽으로 들어오는 태그를 문자열 형태로 저장한다.

    이때 첫번째 클래스이후 띄어쓰기를 해주어야 한다
    그리고 wrapper container의 클래스를 그 문자열로 지정해 준다.

//Card.js
import "./Card.css";

function Card(props) {
  const classes = "card " + props.className;
  return <div className={classes}>{props.children}</div>;
}

export default Card;

//ExpendItem.js
return (
    <Card className="expense-item">
      <ExpendDate date={props.date} />
      <div className="expense-item__description">
        <h2>{props.title}</h2>
        <div className="expense-item__price">${props.amount}</div>
      </div>
    </Card>
  );

15. React 작동방식

16. 폴더 정리

17. Arrow Function으로 바꾸기

profile
2JE0
이전 포스트

Javascript Refresh

다음 포스트

React State

0개의 댓글

관련 채용 정보