2019-04-14 TIL

2019-04-14

자유공부중..

react-native도 결국 react라서, react를 잘 아는게 도움이 된다.

내가 지금 갖다쓰고있는 react-native-elements의 ThemeProvider 컴포넌트도 React의 Context를 이용해 구현되어있다. React 공식문서는 정말 잘되어있다. (Main Concepts 섹션밖에 못봤지만)

css파일을 분리하는건 react에서도 html에서도 하던 일이다. 리액트 네이티브에서 css파일을 분리하는것이 의미가 있을까?

react는 라이브러리를 깔지않는한 컴포넌트 파일 안에 css 문법을 그대로 사용할 수 없지않나? in-line은 쓸수있지만.. 각각의 css 속성 정의를 string으로 저장하고 그걸 변수에 넣고, 변수를 가져다 써야 하지않나?

암튼, react는 컴포넌트 파일 안에 css를 넣을수 없어서 밖으로 빼는것이 아닌가 생각된다.

RN은 기본적으로 css-in-js가 가능한데 이걸 굳이 다른 파일로 빼는것이 의미가 있는가..!?

React의 form 관련 태그들은 HTML 그것들과 다르다.

textarea 태그도 value attribute를 통해 내용을 입력할 수 있다. select 태그의 default 설정도 value attribute으로 한다. 그리고 multiple attribute을 이용하면, 자식으로 option 태그를 넣을 필요가 없다.

composition vs inheritance

상속보다는 composition으로 서브클래스 컴포넌트를 만든다. 컴포넌트를 generic하게 짜고 재사용한다.. children prop을 이용한다.

전화번호 입력받을 때 실제 input과 표현 형식 바꾸는 아이디어

class PhoneNumberInput extends Components {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    }
  }
  toPhoneNumberFormat = phoneNumber => {
    // 01012341234를 010-1234-1234 형식으로 바꿔 리턴
  }
  onChangeHandler = e => {
    this.setState({
      value: e.target.value;
    });
  }
  render() {
    const { toPhoneNumberFormat, onChangeHandler } = this;
    return (
      <input type='text'
        {/* 표현되는 값은 formatting 해주고 */}
        value={toPhoneNumberFormat(this.state.value)}
        {/* 입력되는 값은 01012341234로 state에 저장 */}
        onChange={onChangeHandler} />
    );
  }
}

공부한걸 기록하는것도 의미는 있으니, 시간을 너무 쏟지 말고, 긴글은 이렇게 써두고, 이런건 블로그에 올리던지, 아니면 그냥 기록으로 끝내자. 프로젝트 TIL은 짧게. 기업에서 보는걸 의식하면서 작성하자.

공부 기록은.. 하.. 필요한데..

근데 오늘 쓴 내용 다시 보니까 뭐 별거 아닌데도 적어버렸다. 적는걸 줄이자.