10주 4일차 - [React] Custom Component

10주 4일차 - [React] Custom Component

1. 배운 것

• styled-component 기초, props 사용법
• storybook 사용법
• useRef 사용법, 필요한 상황
• css - transition

2. 내용 정리

1. Styled Components 기본 사용법

• jsx 문법을 사용하지 않으므로 import React from ‘react’; 는 필요 없음.
• 개발자 도구로 styled-components로 생성한 컴포넌트의 클래스명을 보면 랜덤한 문자들의 나열로 된 걸 볼 수 있다. 따라서 클래스명이 겹칠 일이 없으므로 전역 css지만 스타일이 중첩될 일이 없다.
• 가상 클래스는 &:hover {css 스타일링 작성} 이런 식으로 작성함.
• 중첩되는 요소도 & 요소 {css 스타일링} 이렇게 작성함.
• styled component의 클래스명은 해당 컴포넌트의 태그 안에 작성 가능은 하나 쓸 일 이 있을까?
• props 사용 가능.

컴포넌트를 생성하면서 값으로는 styled 객체의 태그명과 동일한 이름의 메서드를 붙여 뒤에 태크드 템플릿 내부에 css 작성.

// 사용법

// 1. 패키지 설치
npm i styled-components

// 2. 사용할 파일 상단에서 import
import styled from 'styled-components';

// 3. 태그드 템플릿 내부에 스타일 작성
const FormControl = styled.div`
  margin: 0.5rem 0; 
  **& label** {
    font-weight: bold;
    display: block;
    margin-bottom: 0.5rem;
		**color: ${props => (props.invalid ? 'red' : 'black')};**
  }

  **& input** {
    display: block;
    width: 100%;
    **border: 1px solid ${props => (props.invalid ? 'red' : '#ccc')};
    background: ${props => (props.invalid ? '#ffd7d7' : 'transparent')};**
    font: inherit;
    line-height: 1.5rem;
    padding: 0 0.25rem;
  }

  **& input:focus** {
    outline: none;
    background: #fad0ec;
    border-color: #8b005d;
  }
`;

2. Styled Components & 동적 Props

기존 방식으로 동적으로 클래스명을 주는 경우

const CourseInput = props => {
  const [enteredValue, setEnteredValue] = useState('');
  const [isValid, setIsValid] = useState(true);
  const goalInputChangeHandler = event => {
    if (event.target.value.trim().length > 0) {
      setIsValid(true); // 입력값이 있으면 값이 유효한지의 state는 true.
    }
    setEnteredValue(event.target.value);
  };

  const formSubmitHandler = event => {
    event.preventDefault();
    if (enteredValue.trim().length === 0) {
      setIsValid(false);
      return;
    }

    props.onAddGoal(enteredValue);
  };

  return (
    <form onSubmit={formSubmitHandler}>
      <FormControl invalid={!isValid}>
        <label>Course Goal</label>
        <input type="text" onChange={goalInputChangeHandler} />
      </FormControl>
      {/* <div className="form-control">
     
      </div> */}
      <Button type="submit">Add Goal</Button>
    </form>
  );
};

2. Storybook

3. useRef

useRef는 값이 변경되어도 재렌더링이 일어나지 않는다.

useRef로 DOM을 선택할 수 있다고 VanliaJS 처럼 DOM 선택을 위한 용도로 사용해선 안된다.

• 변수명.current 로 useRef의 값에 접근한다.

체크박스로 토글버튼 만들기

• input 태그 type checkbox, 체크박스 input 태그와 연결된 label 태그, label 내부 span태그와 텍스트 3개 태그 사용.
• 버튼 움직이는건 before나 after 가상클래스 활용.

참고 자료

• 유데미 [한글자막] React 완벽 가이드 https://www.udemy.com/course/best-react/learn/lecture/28517627#overview
• 벨로퍼트님 블로그 styled-components https://react.vlpt.us/styling/03-styled-components.html
• 벨로퍼트님 블로그 useRef로 특정 DOM 선택하기 https://react.vlpt.us/basic/10-useRef.html
• 리베하얀님 유튜브 체크박스로 토글버튼 만들기 https://www.youtube.com/watch?v=KVUy9i26kiI

3. 리뷰

3.1 좋았던 점

3.2 아쉬웠던 점

3.3 notes

티스토리 블로깅 시 노션에서 작성한 마크다운에서 한줄 코드블록, 하이퍼링크 구문이 제대로 안 불러와져서 불편하다.