WebProgramming/React

[React] 한 페이지 정리

2022. 7. 17. 17:48
목차
  1. Hook
  2. Tip
  3. 활용 Tip

Hook

1. useState

선언 ; const [state,setState] = useState(initialValue)

사용 ; setState(changeValue)

input 1개 일 때 ; onChange = {(e) => {setState(e.target.value)}} / value={state}

input 2개 이상 일 때 ; onChange = {(e) => {setState({...state, [e.target.name]:e.target.value})}}

/ value={state.text} name="text"

input이 checkbox일 때 & 2개 이상일 때

선언 ; const [list,setList]=useState([ ])

handle함수 ; if(checked){setList([...list,value])} else{setList(list.filter((it)=>it !== value))}

input내부 ; value={it.index} onChange={(e)=>{handle(e.target.checked,e.target.value)}} checked={list.includes(it.index)?true:false}

 

2. useRef

선언 ; const inputRef = useRef

사용 ; ref={inputRef} / inputRef.current.focus();

 

3. useContext

- App.js에서 내보내기

import React from 'react'
export const DiaryStateContext = React.createContext();
<StateContext.Provider value={contextData}> </StateContext> // 내보낼 데이터 ; contextData
import StateContext from "./App"
const contextData = useContext(StateContext) // 사용할 변수이름 ; contextData

 

- store폴더 내에 따로 파일을 만들어 내보내기

더보기

# testContext.js ; 기본 파일을 생성. 나중에 context 사용할 때 이 파일을 통해 활용함

import React from "react";

const TestContext = React.createContext({
  array: [],
  num: 0,
  addNum: () => {},
});

export default TestContext;

 

# TestProvider.js ; App.js를 둘러싸기 위함 & 변수,배열,혹은 함수를 만들어 TestContext에게 value로 전달하기 위함

import React, { useState } from "react";
import TestContext from "./test-context";

const TestProvider = (props) => {
  const [state, setState] = useState(0);
  const addNum = () => {
    setState((a) => a + 1);
  };

  const stateContext = {
    array: [1, 2, 3, 4, 5],
    num: state,
    addNum: addNum,
  };

  return (
    <TestContext.Provider value={stateContext}>
      {props.children}
    </TestContext.Provider>
  );
};

export default TestProvider;

 

# 사용할 Component.js

import TestContext from "test-context경로";

const Component = () => {
	const ctx = useContext(TestContext);
	return (
    	{ctx.num}
        {ctx.array}
    )
}

 

4. useNavigate

선언 ; const navigate = useNavigate();

사용 ; navigate('주소',replace:true/false); / navigate(-숫자)

 

5. useParams

선언 ; const {id} = useParams()

 

6. useReducer

reducer 선언 -> useReducer 구조분해 -> dispatch로 사용

- const reducer = (state,action){switch(action.type){ }} => state ; reducer가 불리는 시점의 data, action ; 업데이트를 위한 정보 가짐

- const [itemState,dispatch] = useReducer(reducer,initialState) => itemState ; 앞으로 사용하게 될 state변수, dispatch ; 앞으로 사용할 함수

- dispatch({type:" ", value : }) => reducer의 action에서 활용

예시

더보기
// 1. reducer 선언
const reducer = (state, action) => {
  switch (action.type) {
    case "ADD":
      return state + action.value;
    case "MIN":
      return state - action.value;
    default:
      return 0;
  }
};
// 2. useReducer 구조분해
const [numState, dispatch] = useReducer(reducer, 5);
// 3. dispatch 사용
const handleAddNum = () => {
dispatch({
    type: "ADD",
    value: parseInt(inputNum),
  });
};

 


Tip

1. 자식 Component -> 부모 Component로 데이터 전달하기

부모 Component ; const transData = (data) => {const newData=parentData};  <Child transData = {transData(data)} />

자식 Component ; const Child = ({data}) =>{transData(childData)}

 

2. style 작성 ; camelCase 사용, 콤마(,)로 나열, 중괄호 2개 {{ }}로 감쌈

style={{
  borderRight: "solid 1px",
  padding: "1rem",
}}

 

3. import해올 때, {}줄괄호 넣어서 함수나, context, 변수 가져올 것

기본 내보내기는 중괄호가 필요 없으나, 그냥 내보내기는 필요함

 

4. { 중괄호 } 사용하는 경우

1) props 전달할때, 전달받을 때

2) default export가 아닌 것을 import할 때

3) JS구문사용 할 때

- onChange = { () => {} } 

- { list.map((it)=>{}  }

 

 

5. class명 등 변수 명을 정할 규칙이 필요하다.

- Compoent명 ; PascalCase

- class명 ; dash-case와 snake_case 혼용 ; dase-case는 동일 선상의 속성 나타낼 때, snake_case는 하위 요소 나타낼 때 사용

- 일반변수명 ; camelCase

 

6. 오류 발생시 확인 할 문구

1. IDE 문구 확인 0

2. 웹 페이지 문구 확인 

3. 콘솔창 확인 

4. BreakingPoint 활용 ; F12>소스>페이지>일시정지 포인트 지정해서 함수 하나씩 단계적으로 실행

5. Dev-tool 활용 ; F12>Component에서 props, renderd by 등 많은 정보 접근 가능

 

7. 열린 Component 안에 Component 삽입 하는 법

// 부모.js
<Child>
	<div>
</Child>

//자식.js
const Childe = (props) => {
	return <div>{props.children}</div>
}

 

6. &&문법과 ||문법

A = { a && b } ; a=true일 경우 b가 적용

A = { a || b } ; a=true 일 경우 a가 적용되고, a=false일 경우, b가 적용 됨

 

 

7. e.preventpreventDefault()

어떤 이벤트를 명시적으로 처리하지 않은 경우, 해당 이벤트에 대한 사용자 에이전트의 기본 동작을 실행하지 않도록 지정

 

8. label과 input을 htmlFor로 묶기

<label htmlFor="a"></label>
<input id="a" />

 


활용 Tip

1. useEffect를 이용해 500ms에 한번씩 체크하기

  useEffect(() => {
    const identifier = setTimeout(() => {
      setFormIsValid(
        enteredEmail.includes("@") && enteredPassword.trim().length > 6
      );
    }, 500);

    return () => {
      clearTimeout(identifier);
    };
  }, [enteredPassword, enteredEmail]);

useEffect(()=>{},[ ]) ; [ ] 내부가 변경될 때마다 실행

무엇을? clearTimeout(identifer)를 실행

identifier ; 500ms에 한 번씩 setFormIsValid()를 실행

setTimeout ; 일정시간 지난 후에 함수가 실행되도록 처리 _ 즉, 500ms가 지난 후에 함수 처리

setTimeout(함수,함수가 실행될 시간)

clearTimeout ; setTimeout을 취소

clearTimeout(변수)

 

2. 객체를 통해 props 전달하기

전에 배웠던 내용들과 모두 동일하다. 그런데 이런 방법으로 편하게 props를 전달하는 방법이 있다는 것을 기억하고자 작성한다.

# props 전달하기

  const input = {
    id: "amount",
    type: "number",
    min: "1",
    max: "5",
    step: "1",
    defaultValue: "1",
  };
<Input input={input} label={"Amount"} />

# props 전달받기

<label htmlFor={props.input.id}> {props.label}</label>
<input {...props.input} />

 

3.  자식 Component에게 ref 전달하기(React.forwardRef 활용)

# 부모 Component

import { useRef } from "react";
const App = () => {
    const inputRef = useRef();
    return(
    	<Input ref={inputRef} />
    )
}

# 자식 component

import React from "react";

const Input = React.forwardRef((props, ref) => {
  return (
      <input {...props.input} ref={ref} />
  );
});

export default Input;

 

 

 

 

 

 

저작자표시 (새창열림)

'WebProgramming > React' 카테고리의 다른 글

[React] Createportal을 이용해 특정 요소에 하위 요소 추가하기  (0) 2022.07.21
[React] CSS Module을 이용한 컴포넌트 스타일링  (0) 2022.07.20
[React] styled-component를 이용한 컴포넌트 스타일링  (0) 2022.07.20
[React] Checkbox 값 제어하기  (0) 2022.07.17
[React] Component로 css요소 복사하기  (0) 2022.07.17
[React] 웹사이트 배포하기  (0) 2022.07.13
[React] Reducer를 통해 state 관리하기  (0) 2022.07.12
[React] Redux  (0) 2022.07.09
  1. Hook
  2. Tip
  3. 활용 Tip
'WebProgramming/React' 카테고리의 다른 글
  • [React] styled-component를 이용한 컴포넌트 스타일링
  • [React] Checkbox 값 제어하기
  • [React] Component로 css요소 복사하기
  • [React] 웹사이트 배포하기
피터s
피터s
1년차 프론트엔드 개발자입니다 😣 아직 열심히 배우는 중이에요! 리액트를 하고있어요 :) - gueit214@naver.com - https://github.com/gueit214
피터s
피터의 성장기록
피터s
전체
오늘
어제
  • 분류 전체보기 (200)
    • 코딩 테스트 (25)
      • 프로그래머스 (16)
      • LeetCode (8)
      • 백준 (1)
    • 개발 독서 일지 (1)
    • 기업 분석 (4)
    • 개발 일지 (19)
      • 최신기술 도전기 (1)
      • 에러 처리 (5)
      • 개발 일지 (12)
    • 개발 일상 (36)
      • 개발 회고 (22)
      • 개발 이야기 (12)
      • 개발 서적 (1)
    • 취업 관련 지식 (11)
    • 알고리즘 (17)
    • WebProgramming (84)
      • WebProgramming (8)
      • HTML (5)
      • CSS (8)
      • JS (21)
      • React (40)

블로그 메뉴

  • About
  • 2022년 개발 성장기
  • 앞으로의 계획
  • github
  • 일상 blog

공지사항

인기 글

태그

  • 함수
  • 카카오
  • 스터디 후기
  • KAKAO BLIND
  • lv3
  • 해커톤
  • Union-find
  • Kakao Tech Internship
  • dfs
  • LV2
  • 누적합
  • 1년 회고
  • 반복문
  • Retry
  • 카카오 채용연계형 인턴십
  • 1일 1커밋 후기
  • 개발 is life
  • 개발 회고
  • BFS
  • 구름
  • 구름톤
  • 개발 일상

최근 댓글

최근 글

hELLO · Designed By 정상우.
피터s
[React] 한 페이지 정리
상단으로

티스토리툴바

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.