dB's Codeshare

(참고내용) 리액트에서 모든 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 ...

타입스크립트를 사용하면 React.Component 클래스를 확장하여 리액트 컴포넌트를 만들 수 있으며 props와 state의 타입을 정할 수 있습니다. 특별한 타입이 없을 경우 아래오 같이 작성합니다. 만약, props와 state를 사용한다면 interface를 만들어서 원하는 타입 설정이 가능합니다. export default class MyComponent extends React.Component<{}, {}> { public render() { return ( Hello World! ); } } 리액트에서 제공하는 propTypes를 사용할 수도 있지만, 타입스크립트의 interface를 적용하면 컴포넌트를 더욱더 깔끔하게 만들어 주며 코드의 가독성을 높여줍니다. 이는 객체 지향 프로그래밍(OOP) 언어인 Java, C# 등에서도 발견할 수 있습니다. interface IMyComponentProps { someDefaultValue: string } interface IMyComponentState { someValue: string } export default class MyComponent extends React.Component<IMyComponentProps, IMyComponentState> { constructor(props : IMyComponentProps) { super(props); this.state = { someValue: this.props.someDefaultValue }; } public render() { return ( <div> Value set as {this.state.someValue} </div> ); ...

Data structures and types  Data types  Boolean  null  undefined  Number  String  Symbol  Object Object를 제외하고 나머지 6개의 데이터 타입은 원시형(primitives) 으로 객체와 메소드가 없으며 immutable 속성을 가지고 있습니다. undefined은 변수가 정의되어 있지만 아무 값도 할당 받지 않은 상태이며, null은 null값을 할당받은 것을 말합니다. 또 다른 차이점은 null은 객체타입, undefined은 undefined이 출력됩니다.  Primitive wrapper objects  원시타입형에서 properties에 값을 할당은 안되지만, 오류는 아닙니다. 이는 null과 undefined를 제외한, 나머지 원시값은 그 값들을 감싸는 primitive wrapper objects 때문입니다. 객체의 원시값을 가져올때는 valueOf() 사용가능합니다. var fred = "Fred Flintstone"; fred.favoriteFood = "Brontosaurus Steak"; // Outputs: undefined console.log(fred.favoriteFood); // 문자열 표현 let str1 = new String('str1') let str2 = 'str2' typeof str1 // 'object' typeof str2 // 'string' str1 instanceof String // true str2 instanceof String // false str1 instanceof Object // true str2 instanceof Object // false NaN typeof NaN === 'number' // true NaN === NaN // false NaN !=...

리액트 프로젝트에서 컴포넌트를 스타일링 할 때 자주 사용하는 방법으로는 아래 3가지가 있습니다. 이번 포스팅에서는 CSS 모듈에 대해 알아보도록 하겠습니다. 1. CSS Module 2. Sass 3. styled-components import withStyles from 'isomorphic-style-loader/lib/withStyles' import * as s from './Header.scss' import 된 Headers.scss 는 s 객체로 변환되며, key와 value값으로 클래스명에 접근하게 됩니다. { apply: "Businesses-apply-bc84", btn-choice: "Businesses-btn-choice-c57b", cell: "Businesses-cell-c929", root: "Businesses-root-c558" } 리액트에서 명명된 스타일 객체에 접근하려면 아래와 같이 사용할 수 있습니다. (자바스크립트 객체값 접근 방법). key값이 캐밥스타일(kebab-case)로 이루어져 있다면, 오류를 줄이고자 작은따옴표를 사용하는 것을 권장 합니다. <div className={s.item}></div> <button className={s['btn-wide']}></button> CSS 스타일 로더를 사용하는 이유는 CSS 랜더링 및 동일구조 앱 환경 최적화를 목표로 하고 있습니다. Isomorphic Javascript 앱은 클라이언트와 서버 사이드 모두에서 작동되는 것을 말합니다. 이러한 앱을 만들려면 가장 중요한 것이 바로 추상화입니다. 즉, 의존성을 제거하고 어디서든 사용할 수 있도록 각각의 기능과 역할에만 집중해야 합니다. CSS 스타일도 마찬가지 입니다. CSS Modules 좀 더 자세히 알아보기 CSS 모듈은...