요약

• React
  • 리액트는 배열을 수정하지 않고 새로 만들어야 함 (ex. concat, slice ...)
  • 구조분해할당
  • 예전 값을 이용해서 setState할 땐 함수형으로(prevState)
  • DOM에 직접 접근하고 싶을 땐 ref사용하기
  • 리액트를 class로 만들면 this를 잘 써야 함
• CSS
  • 상속
  • 폰트(+overflow), 웹 폰트

React

React의 불변성

• pop, push, shift, splice
• concat, slice

이 함수들의 차이는 배열의 원본을 수정하는 함수/배열을 새로 만드는 함수 임

리액트를 쓸 때 명심할 것은 객체를 바꾸지 말고 복사해야 한다는 것이다. 리액트에 불변성의 특징이 있기 때문이다.
-> 객체를 복사하는건 리액트가 setState라는 함수로 미리 만들어놨음. 이거 쓰면 됨

구조분해할당

const result=React.useState(false);
const liked=result[0];
const setLiked=result[1];

원래는 이렇게 받아야 하는데, 배열에 그 자리에 해당하는 값을 대치시켜서 과정을 단축시키는 것이 구조분해할당이다.

[liked, setLiked]=useState(false);

예전 값을 이용해서 setState쓸 때는 함수형 사용

아래의 코드 블럭은 실습하면서 만든 class의 메소드인데, prevalue에서 this.state.value를 사용하고 있다.

this.state.OO 을 setState 내부에 사용하는 경우에는 앞으로 꼭 함수형으로 표현하기로 배웠다. this.state.~~ 자체가 비동기이기 때문에 직접 사용했을 때 원하는 값을 얻지 못하기 때문이라고 한다.

onSubmit = (event) => {
  event.preventDefault();
  if (parseInt(this.state.value) === this.state.first * this.state.second) {
    this.setState({
      prevalue: this.state.value,
      result: '정답',
      first: Math.ceil(Math.random() * 9),
      second: Math.ceil(Math.random() * 9),
      value: ' ',
    });
    this.input.focus();
  }
  else {
    this.setState({
      result: '땡',
      prevalue: this.state.value,
      value: ' ',
    });
    this.input.focus();
  }
};

<내 코드에서 예시 찾기>

this.setState({
  prevalue: this.state.value,
  result: '정답',
  first: Math.ceil(Math.random() * 9),
  second: Math.ceil(Math.random() * 9),
  value: ' ',
});

내가 설명한 내용은 이 부분이다. prevalue의 값을 이전 value로 설정하기 위해 함수형으로 setState를 사용할 것이다.

<setState 함수형으로 사용하기>

this.setState((prevState) => {
  return {
    preresult: prevState.value,
    result: '정답',
    first: Math.ceil(Math.random() * 9),
    second: Math.ceil(Math.random() * 9),
    value: '', 
  };

위의 블럭코드를 보면 prevState라는 인자를 보내서 코드를 더 가속성있게 만들었다. 가독성뿐만 아니라 비동기 문제도 해결된다고 한다.

ref 사용하기

ref는 다음과 같은 상황에서 사용한다. (참고)

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때.
• 애니메이션을 직접적으로 실행시킬 때.
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때.

나는 input에 포커스를 두기 위해서 ref를 사용할 것이다.

render함수의 jsx태그 안에 속성으로 ref를 줄 수 있다. ref는 onClick, onSubmit등과 마찬가지로 함수를 속성값으로 줄 수 있다.

나는 input태그 안에 ref={(c) => { this.onRefInput }} 를 추가했다.

<form onSubmit={this.onSubmit}>
  <input
    ref={(c) => { this.onRefInput }}
    type="number"
    value={this.state.value}
    onChange={this.onChange}
    />
  <button>입력!</button>
</form>

onRefInput 은 onRefInput = (c) => { this.input = c; }; 라는 간단한 코드로 선언돼있다.

이걸 render를 제외한 컴포넌트 내부에서 사용할 수 있다. 함수에 this.input=c 라고 적었기 때문에 input 으로 접근할 수 있다. 다른 값을 적으면 적은 값으로 접근할 수 있다.

render 최상위 태그

render 함수 쓸 때 최상위에는 단 하나의 태그만 와야한다는 규칙이 있었다. 보통은 div로 그 태그를 많이 설정하는거 같은데, 그렇게되면 무의미한 태그가 생겨서 거슬린다. 그럴 때는 최상위 태그를 비워서 사용할 수 있다.

render(){
  return(
    <>
      <div></div>
      <div></div>
    </>
  );
}

된다고는 하는데 babel이 이 형식을 못 읽어서 실제로 실행되는건 못봤다ㅋㅋ

최상위태그를 <React.Fragment> 로 작성해도 빈태그와 같은 효과라고 한다. 마찬가지로 못 읽어서 확인 못함ㅋㅋ

추가

rca를 안 쓰고 작업하기 때문에 babel 설정 등 막히는게 너무 많아서 힘들었다. 이전에 다른 강의 들었을 땐 이정도로 어렵지 않았던거 같은데 그때는 수박 겉핥기 느낌이었다면 지금은 딥하게 배우는 느낌이다.

CSS

font관련 속성

• line-height(행간)
• letter-spacing(자간)
• vertical-align: 인라인블록 세로정렬
• word-break: 텍스트가 콘텐츠 밖으로 넘쳤을 때 줄바꿈 설정
  • keep-all: 띄어쓰기 기준 줄바꿈
  • break-all: 글자 하나씩 쪼개서 넘치면 줄바꿈
• overflow-wrap: 콘텐츠 넘는 경우
  • break-word: 화면 넘어감
  • break-all: 글자 잘려서 아래로 내려감

overflow

• visible(기본): 넘쳐보임
• hidden: 감춤
• scroll: 스크롤(콘텐츠가 작아도 스크롤을 강제로 보여줌)
• auto: 콘텐츠가 넘칠 때만 스크롤을 보여줌

text-overflow

이 속성을 사용하려면 미리 두 속성을 부여해야 한다.

white-space: nowrap;
overflow: hidden;

이 속성들을 줘야 줄바꿈을 막고 한 줄로 표현된다.