Skip to main content

[dB's 리액트] 컴포넌트에 BR 태그 추가하는 방법

(참고내용) 리액트에서 모든 DOM 프로퍼티와 속성값은(이벤트 헨들러포함) 반드시 카멜표기법을 사요해야합니다. 예를들어, tabindex 는  tabIndex와 동일합니다. 예외가 있다면, aria-*, data-* 가 있습니다. 이번 포스팅에서 다룰 내용은 컴포넌트에 <br> 태그 사용법입니다. 정확히 말하면 html 문자열에 있는 newline(\n)을 <br> 태그로 전환하는 방법입니다. 기본적으로 리액트는 cross-site-scripting(XSS) 공격을 막기위해 렌더링 메소드 내부에 html의 문자열을 사용하면 렌더링이 되지 않습니다. 즉, 무조건 텍스트형태로 렌더링이 됩니다. 이러한 취약점을 알고도 사용을 원한다면 아래와 같은 dangerouslySetInnerHTML 방법이 있습니다. 

function createMarkup() {
  return {__html: 'First &middot; Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}
하지만 더 좋은 방법이 있습니다. 바로 Mapping을 통하여 문자열을 배열로 만들어 출력하는 방법입니다. 첫 번째 코드는 기본적인 사용법입니다. 두 번째 코드는 함수 유틸리티로 만들어 리액트 작업시 어디에서도 사용할 수 있도록 제작되었습니다.


{
  data.split('\n').map( line => {
    return (<span>{line}<br/></span>)
  })
}


export function getNewlinesApplied(html) {
  if (!html) return null

  const lines = html.split('\n')

  if (lines.length === 0) {
    return html
  }

  return lines.map((line, index) => (
    React.createElement('span', {
      key: index,
    }, line, React.createElement('br'))
  ))
}
이제 미리 정의된 함수를 불러와서 쉽게 사용이 가능합니다. (참고내용) cross-site-scripting 공격은 게시판, 블로그, 회원가입 등에서 주로 나타나며, HTML 태그 입력이 가능한 곳에서 스크립트 공격을해서 사용자의 정보를 가져오는 것을 말합니다.
Labels:

Comments

Post a Comment

Popular posts from this blog

[dB's 리액트] Styled Components_ 기본개념

컴포넌트 제작 1. Small, focussed component 2. Container component class Sidebar extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <div className="sidebar"> {this.state.items.map(item => ( <div className="sidebar__item">{item}</div> ))} </div> ) } } Containers와 components를 분리합니다. Containers는 작동원리를 포함하고, components는 어떻게 보이는지를 나타냅니다. class SidebarContainer extends React.Component { componentDidMount() { fetch('api.com/sidebar') .then(res => { this.setState({ items: res.items }) }); } render() { return ( <Sidebar> {this.state.items.map(item => ( <SidebarItem item={item} /> ))} </Sidebar> ) } } 그렇다면 스타일링은 어떨까요? 1. Single-use classes 2. Components as a s...
Post a Comment
Read more

[dB's 리액트] Render Prop 사용하기

HOC는 코드 재사용 문제를 해결하기 위해 고안되었습니다. createClass 패러다임에서는 이러한 문제를 mixins으로 해결하였습니다. ES6 classes 가 등장하고 createClass는 사라지기 시작했습니다. 하지만 ES6 클래스는 mixins을 지원하지 않는다는 문제점이 있었습니다. 그 결과 HOC가 등장하였으며 재사용에 대한 이슈를 해결한 듯 보였지만, 기존 mixins이 가지고 있던 모든 이슈들을 해결한 건 아니였습니다. Render Props를 사용하면 mixins과 HOC가 가지고 있는 문제점들을 해결할 수 있습니다. Render Props 패턴은 함수로 이루어진 props를 이용하여  컴포넌트 간 코드를 공유하는 방법입니다. <DataProvider render={data => ( <h1>Hello {data.target}</h1> )}/> import React from 'react' import ReactDOM from 'react-dom' import PropTypes from 'prop-types' // Instead of using a HOC, we can share code using a // regular component with a render prop! class Mouse extends React.Component { static propTypes = { render: PropTypes.func.isRequired } state = { x: 0, y: 0 } handleMouseMove = (event) => { this.setState({ x: event.clientX, y: event.clientY }) } render() { return ( <div style={{ height: '100%' }} on...
Post a Comment
Read more

[dB's 리액트] 리액트 16.3 무엇이 바뀌었나?!

리액트 16.3 버전이 새롭게 업데이트 되었습니다. 새로운 라이프 사이클과 API들이 소개 되었습니다: context API, ref forwarding API, ergonomic ref API 입니다. Context API Context API는 기존에도 제공되었습니다. 하지만, 상속 문제로 인해 사용 빈도가 적었으며 더 좋은 방법들로 대체되었습니다. 예로, redux, react-router, styled-components 등이 Context API를 기반으로 제작 되었습니다. Context는 CreateContext 함수를 이용해서 제작합니다. 이 함수는 Provider와 Consumer를 호출할 수 있습니다. Provider는 Context에서 사용할 값을 설정하고 Consumer는 설정한 값을 불러올 때 사용합니다. const ThemeContext = React.createContext('light'); class ThemeProvider extends React.Component { state = {theme: 'light'}; render() { return ( <ThemeContext.Provider value={this.state.theme}> {this.props.children} </ThemeContext.Provider> ); } } class ThemedButton extends React.Component { render() { return ( <ThemeContext.Consumer> {theme => <Button theme={theme} />} </ThemeContext.Consumer> ); } } 링크 https://hackernoon.com/how-to-use-the-new-react-co...
Post a Comment
Read more