월드스토리의 코딩 나라

React 컴포넌트 스타일링 방식• 일반 CSSimport 명령어를 사용해서 'css 파일을 불러내서 사용하거나 style 속성에서 사용함.즉, 평범한 CSS 사용방식기존 CSS 클래스를 이용할 경우, 컴포넌트별 클래스가 중복되지 않도록 클래스명을 지정해야 함Sass• Syntactically Awesome Style Sheets • CSS 전처리기 종류 중 하나 • 복잡한 작업을 쉽게 할 수 있도록 도와주고, 스타일 코드의 재활용성과 코드의 가독성을 높여 유지보수를 더욱 쉽게 해준다.Styled Components• JavaScript 안에서 CSS를 작성하도록 도와주는 CSS-in-JS 라이브러리 • 컴포넌트 기반의 설계 방식Tailwind CSS• utility-first 개념으로 만들어진 CSS ..

1. Custom Hooks이란?반복되는 로직을 함수로 뽑아내어, 커스텀해 사용하는 hook을 말한다.여러 url을 fetch할 때, 여러 input에 의한 상태 변경 등 반복되는 로직을 동일한 함수에서 작동하게 하고 싶을 때 커스텀 훅을 주로 사용한다. 이를 이용하면상태관리 로직의 재활용이 가능하고클래스 컴포넌트보다 적은 양의 코드로 동일한 로직을 구현할 수 있으며함수형으로 작성하기 때문에 보다 명료하다는 장점이 있습니다. (e.g. useSomething)예시예를 들어 이런 컴포넌트가 있다. 해당 컴포넌트는 실제 React 공식 문서에 있는 컴포넌트이다. //FriendStatus : 친구가 online인지 offline인지 return하는 컴포넌트function FriendStatus(props) ..

useCallback()useCallback은 useMemo와 비슷한 Hook입니다. useMemo는 특정 결괏값을 재사용할 때 사용하는 반면,  useCallback은 특정 함수를 새로 만들지 않고 재사용하고 싶을 때 사용하는 함수입니다. useCallback 사용법const memoizedCallback = useCallback(function, deps); useCallback은 첫 번째 인자로 넘어온 함수를, 두 번째 인자로 넘어온 배열 형태의 함수 실행 조건의 값이 변경될 때까지 저장해놓고 재사용할 수 있게 해 줍니다.예를 들어 리액트 컴포넌트 안에 함수가 선언되어있을 때 이 함수는 해당 컴포넌트가 렌더링 될 때마다 새로운 함수가 생성되는데, useCallback을 사용하면 해당 컴포넌트가 렌더..

Hooks 란?클래스 컴포넌트에서만 가능했던 state(상태관리) 와 lifecycle(라이프사이클) 이 가능하도록 돕는 기능최상위 단계에서만 호출이 가능하며 반복문, 조건문, 중첩된 함수 내부에서 호출하면 됨  Hooks 대표적인 종류 useState() 상태 관리를 위한 가장 기본적인 훅 useRef() 참조(reference)를 생성하고 관리할 수 있는 훅 (DOM 접근, 변수 보존 등) useEffect() 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 훅 useMemo() 메모이제이션을 통해 함수의 리턴 값을 재사용할 수 있게 해주는 훅 useCallback() : 함수를 메모이제이션하여 불필요한 렌더링을 줄이게 해주는 훅 useReducer() 복잡한 컴포넌트 상태 로직을..

react-hook-form의 사용법React에서 기존 사용자입력값을 관리하려면, useRef나 useState를 이용해야했지만, React Hook Form을 이용하면 간단하게 처리할 수 있다 1. npm 패키지를 사용해 react-hook-form을 install 한다.npm install react-hook-form2. 상태관리를 위해 필요한 함수를 불러와 실행한다.register, handleSubmit, watch, formState 주요 키워드register입력 요소에 연결하기 위한 함수. 이 함수를 통해 입력 요소에 유효성 검사 규칙을 설정handleSubmit폼의 제출을 처리하기 위한 함수. 이 함수에 전달된 콜백은 유효성 검사를 통과한 데이터를 인자로 받아 실행watch특정 폼 필드의 값..

Life Cycle이란?하나의 컴포넌트가 생성되었다가 다시 제거되는 과정을 일정한 단계로 구분한 것 Mount• DOM이 생성되고 웹 브라우저 상에 나타남Update• props or state 바뀌었을 때 업데이트함Unmount• 컴포넌트가 화면에서 사라질(제거될) 때   Class형 컴포넌트에서 사용하는 메서드  - 요즘은 잘 쓰이지 않음  constructor클래스형 컴포넌트에서 생성자를 정의하는 메서드입니다. 이 메서드는 컴포넌트가 인스턴스화될 때 호출되며, 컴포넌트의 초기 상태를 설정하거나 바인딩 작업 등을 할 때 사용됩니다.즉, 컴포넌트의 초기 상태를 설정하는 컴포넌트render함수형 컴포넌트에서 return 문 부분을 담당하는 함수getDerivedStateFromProps이 메서드는 컴포넌..

Ref 란?• 전역적으로 작동하지 않고 컴포넌트 내부에서 선언 및 사용• 동일한 컴포넌트를 반복해 사용해도 각 컴포넌트 내부에서만 동작해서 중복되지 않음• DOM을 직접적으로 건드려야 할 때 사용 Ref 사용하기 - 클래스 형 컴포넌트  1. 콜백함수를 사용한 방법- 사용하고자 하는 DOM 요소에 ref 라는 콜백 함수 작성 및 props로 전달 - ref 를 컴포넌트의 멤버 변수로 설정하는데, 이때 ref는 원하는 대로 사용 가능 - 한마디로 ref의 명칭은 아무거나 해도 인식함- this라는 내부 공간에 주소값을 담는 공간을 만드는 식이라고 생각하면 될듯.2. 내장함수createRef - React.createRef 함수를 이용해 컴포넌트 내부에서 변수에 ref 요소를 담아준다.- 이때만든 input..

단축평가란? • 논리 연산자를 사용하여 특정 조건에 따라 값을 결정하거나, 조건에 따라 특정 코드를 실행하는 방법  && 연산자A가 falseB는 아예 확인하지 않고 바로 A의 값을 반환합니다. A가 true만약 A가 true 라면, B의 값을 확인.이 경우, B의 값이 반환됩 니다.  || 연산자A가 falseB의 값을 확인해야 합니다. 이 경우, B의 값이 반환됩니다.A가 trueB는 아예 확인하지 않고 바로 A의 값을 반환합니다.

map() 함수• map()의 인자로 넘겨지는 callback 함수를 실행한 결과를 가지고 새로운 배열을 만들 때 사용.• map() 함수를 필요에 따라 반복문처럼 사용할 수도 있음.• 리엑트의 return 문 내부에서  사용이 가능한 것이 가장 큰 특징 map() 함수 문법용어 의미callbackFunction• 새로운 배열의 요소를 생성하는 함수로, currentValue, index, array 3개의 인 수를 가질 수 있다.[this.Arg]•  필요 없으면 생략이 가능하며, callbackFunction에서 사용할 this 객체를 의미함  map() 함수의 사용 방법txtlist 를 순서대로 돌면서 나오는 값id방금 나온 값(txt)의 인덱스arr현재 반복을 돌고 있는 배열key• 기존 요소와 ..

Event Handling의 차이 Event 적용 방법의 차이형식 사진HTML에서 사용하던 형식React에서 사용하던 형식1. React의 이벤트는 소문자가 아닌 카멜 케이스(camelCase) 이용2. JSX를 사용해 이벤트 핸들러 전달하며, 직접 만든 컴포넌트에는 이벤트가 아닌 Props로 전달해야 함.3. 즉, 전달 후 컴포넌트 내 기본 컴포넌트에 연결하는 것  React 합성 이벤트• Synthetic Event ( 합성 이벤트 )•  React에서 사용하는 이벤트는 브라우저의 기본 이벤트가 아니다!• 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 Wrapper(래퍼) 객체합성 이벤트(SyntheticEvent) – React  클래스 컴포넌트에서의 이벤트 • 클래스형 컴포넌트에서는 this를..