📝 오늘 한 것

1. react rendering

📖 학습 자료

1. react 문서

📚 배운 것

새롭게 알게 된 내용이거나 이해하기 어려웠던 부분만 정리

1. JSX 소개

1) XSS 공격 방지

[HTTP/보안] 크로스 사이트 스크립트 공격( XSS : Cross-site Scripting Attacks ) 참고

XSS(cross-site-scripting) 공격이란 웹사이트 관리자가 아닌 이가 웹 페이지에 악성 스크립트를 삽입하는 것을 말한다.
그런데 기본적으로 React DOM은 JSX에 삽입된 모든 값을 렌더링하기 전에 이스케이프 한다. (이스케이핑 참고)
따라서, 애플리케이션에서 명시적으로 작성되지 않은 내용은 삽입될 수 없다.

다시 말해, JSX에 삽입된 모든 값은 렌더링 되기 전에 문자열로 변환되기 때문에 악성 스크립트를 삽입하는 XSS 공격을 방지할 수 있는 것이다.

2. JSX 이해하기

1) prop의 기본값은 'true'이다

<MyTextBox autocomplete />

// 위와 아래는 같은 표현이다.
// 일반적으로 prop에 값을 전달하는 것을 권장한다. ES6 문법과 헷갈릴 수 있기 때문이다.

<MyTextBox autocomplete={true} />

2) 속성 펼치기 - 전개 연산자(...) 사용

• HEAD 컴포넌트가 사용할 props에 해당하는 객체를 부모 컴포넌트(App2)가 이미 가지고 있다면, 전개 연산자(spread 연산자)를 사용해 전체 객체를 자식 컴포넌트(즉, HEAD 컴포넌트 Greeting)로 그대로 넘겨줄 수 있다.

function App1() {
  return <Greeting firstName="Ben" lastName="Hector" />;
}

// 위와 아래는 같은 표현이다.

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return <Greeting {...props} />;
}

• HEAD 컴포넌트에서 HEAD 컴포넌트가 사용하게 될 특정 prop을 선택하고, 나머지 prop은 전개 연산자를 통해 넘길 수 있다. 이는 HEAD 컴포넌트를 유용하게 재사용할 수 있도록 한다.

const Button = props => {
  const { kind, ...other } = props;
  const className = kind === "primary" ? "PrimaryButton" : "SecondaryButton";
  return <button className={className} {...other} />;
};

const App = () => {
  return (
    <div>
      <Button kind="primary" onClick={() => console.log("clicked!")}>
        Hello World!
      </Button>
    </div>
  );
};

3) 함수를 자식으로 사용하기

보통 JSX에 삽입된 JavaScript 표현식은 문자열이나 React element 또는 이들의 배열로 환산된다.

그러나, props.children 또한 다른 prop들과 마찬가지로 React가 렌더링 할 수 있는 데이터의 형태뿐 아니라 (onClick 이벤트 리스너 함수를 넘기는 것처럼) 어떤 형태의 데이터도 넘겨질 수 있다.

아래의 예시에서는 props.children을 통해서 콜백을 넘겨받아 반복적인 컴포넌트를 생성하고 있다.

function Repeat(props) {
  // console.log(props); => {numTimes: 10, children: ƒ}

  let items = [];

  for (let i = 0; i < props.numTimes; i++) {
    items.push(props.children(i));
  }

  return <div>{items}</div>; {/* React element들의 배열을 반환한다 */}
}

function ListOfTenThings() {
  return (
    <Repeat numTimes={10}>
      {(index) => <div key={index}>This is item {index} in the list</div>} {/* props.children */}
    </Repeat>
  );
}

const root = document.getElementById("root");
ReactDOM.render(<ListOfTenThings />, root);

4) 조건부 렌더링

0과 같은 falsy 값은 React가 렌더링하기 때문에 주의해야 한다.

const falsy = 0;
const SomeComponent = () => <p>I am something else.</p>;
const Article = () => (
  <div className="something">
    {true && <SomeComponent />} {/* 브라우저에 <SomeComponent /> 가 렌더링됨 */}
    {false && <SomeComponent />} {/* 브라우저에 아무것도 렌더링되지 않음 */}
    {falsy && <SomeComponent />} {/* 브라우저에 0이 렌더링됨 */}
  </div>
);

const root = document.getElementById("root");
ReactDOM.render(<Article />, root);

cf. true, false, undefined 같은 값을 출력하고 싶다면 String(false) 처럼 문자열로 바꿔야 한다.

3. Components와 Props

1) props는 읽기 전용입니다.

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작한다.
컴포넌트 함수 내부에서 인자로 받은 props의 값을 수정해서 사용해서는 안된다.

2) 컴포넌트 추출

UI의 일부가 여러 번 사용되거나(Button, Panel, Avatar) UI의 일부가 자체적으로 복잡한 경우(App, FeedStory, Comment)에는 별도의 컴포넌트로 만드는 것이 좋다.

• props

function Img(props) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <img className="Avatar" src={props.user.avatarUrl} alt={props.user.name} />
  );
}

function UserInfo(props) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <div className="UserInfo">
      <Img user={props.user} />
      <div className="UserInfo-name">
        {props.user.name}
      </div>
    </div>
  );
}

function Comment(props) { // props === { author: "...", text: "...", date: ... }
  const formatDate = (date) => date + "시";

  return (
    <div className="Comment">
      <UserInfo user={props.author} />
      <div className="Comment-text">
        {props.text}
      </div>
      <div className="Comment-date">
        {formatDate(props.date)}
      </div>
    </div>
  );
}

function App() {
  const author = {
    name: "Syong",
    avatarUrl: "https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E",
  };

  return (
    <div>
      <Comment author={author} text="댕댕이입니다" date={new Date().getHours()} />
    </div>
  );
};

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

• ES6 구조 분해 할당

function UserInfo({user}) { // // props.user === { avatarUrl: "...", name: "..." }
  return (
    <div className="UserInfo">
      <Img user={user} />
      <div className="UserInfo-name">
        {user.name}
      </div>
    </div>
  );
}

function Img({user}) { // props.user === { avatarUrl: "...", name: "..." }
  return (
    <img className="Avatar" src={user.avatarUrl} alt={user.name} />
  );
}

function Comment({author, text, date}) { // props === { author: "...", text: "...", date: "..." }
  const formatDate = (date) => date + "시";

  return (
    <div className="Comment">
      <UserInfo user={author} />
      <div className="Comment-text">
        {text}
      </div>
      <div className="Comment-date">
        {formatDate(date)}
      </div>
    </div>
  );
}

function App() {
  const author = {
    name: "Syong",
    avatarUrl: "https://t1.daumcdn.net/cfile/tistory/24283C3858F778CA2E",
  };

  return (
    <div>
      <Comment author={author} text="댕댕이입니다" date={new Date().getHours()} />
    </div>
  );
};

const root = document.getElementById("root");
ReactDOM.render(<App />, root);

✨ 내일 할 것

1. react state