프론트엔드/React
-
@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react 상태 관리 라이브러리인 리덕스에 대하여 설명하겠습니다propsproperties의 줄임말구성 요소가 서로 통신하는 방법상위 구성 요소에서 아래쪽으로 흐름해당 값을 변경하려면 자식 관점에서 props를 변경 할수 있으며, 부모는 내부 상태를 변경해야 함state부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 컴포넌트 안에서 데이터를 전달할 때 state로 전달함state가 변하면 re-render가 된다redux 사용이유store가 없으면 상태를 여러 컴포넌트를 거쳐서 전달해야 할 경우가 생김리덕스는 이를 스토어를 통해서 관리함스토어를 통해서 상태를 전달해주면 데이터를 여러번에 거쳐서 줄 필요가 없음redux 데이터 플로우red..
리덕스란@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react 상태 관리 라이브러리인 리덕스에 대하여 설명하겠습니다propsproperties의 줄임말구성 요소가 서로 통신하는 방법상위 구성 요소에서 아래쪽으로 흐름해당 값을 변경하려면 자식 관점에서 props를 변경 할수 있으며, 부모는 내부 상태를 변경해야 함state부모 컴포넌트에서 자녀컴포넌트로 데이터를 보내는게 아닌 컴포넌트 안에서 데이터를 전달할 때 state로 전달함state가 변하면 re-render가 된다redux 사용이유store가 없으면 상태를 여러 컴포넌트를 거쳐서 전달해야 할 경우가 생김리덕스는 이를 스토어를 통해서 관리함스토어를 통해서 상태를 전달해주면 데이터를 여러번에 거쳐서 줄 필요가 없음redux 데이터 플로우red..
2023.12.11 -
@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react에서 { } (중괄호) 와 ( ) (소괄호) 소괄호의 차이에 대해서 설명하겠습니다.{ } 중괄호JavaScript 표현식을 사용할 때 사용합ㄴ디ㅏ{ } 안에 JavaScript 코드를 작성하며, 해당 코드는 평가 되고 결과가 JSX에 삽입됩니다.변수, 함수, 호출, 산울 연산 등의 JavaScript 코드를 { } 안에 작성할 수 있습니다const myVar = 'Hello'; const myElement = {myVar};( ) 소괄호JSX에서 여러 줄을 그룹화 하거나, JSX를 반환할 때 사용합니다{ } 와 마찬가지로 JSX 내에서 JavaScript 표현식을 그룹화 할 때도 사용합니다const myElement = ( Hello ..
{ }, ( ) 차이, feat return@2023/12/11 안녕하세요 lika-7입니다이번시간에는 react에서 { } (중괄호) 와 ( ) (소괄호) 소괄호의 차이에 대해서 설명하겠습니다.{ } 중괄호JavaScript 표현식을 사용할 때 사용합ㄴ디ㅏ{ } 안에 JavaScript 코드를 작성하며, 해당 코드는 평가 되고 결과가 JSX에 삽입됩니다.변수, 함수, 호출, 산울 연산 등의 JavaScript 코드를 { } 안에 작성할 수 있습니다const myVar = 'Hello'; const myElement = {myVar};( ) 소괄호JSX에서 여러 줄을 그룹화 하거나, JSX를 반환할 때 사용합니다{ } 와 마찬가지로 JSX 내에서 JavaScript 표현식을 그룹화 할 때도 사용합니다const myElement = ( Hello ..
2023.12.11 -
@2023/11/02 안녕하세요 lika-7입니다이번시간에는 react hook 중 useMemo에 대해서 설명하겠습니다useMemo란useMemo는 React에서 제공하는 훅 중 하나로, 성능 최적화와 계산 비용을 줄이기 위해 사용됩니다. 이 훅은 주로 연산 비용이 높은 함수나 연산을 수행할 때 사용됩니다. useMemo는 두 개의 인수를 가지며 다음과 같은 역할을 수행합니다:첫 번째 인수: 계산할 함수 또는 값입니다. 이 함수 또는 값은 useMemo의 두 번째 인수인 종속성 배열이 변경될 때에만 다시 계산됩니다. 종속성 배열에 있는 값이 변경되지 않는 한, useMemo는 캐시된 값을 반환합니다.두 번째 인수 (종속성 배열): useMemo가 다시 계산되어야 하는 조건을 정의하는 배열입니다. 이 배..
React Hook - useMemo@2023/11/02 안녕하세요 lika-7입니다이번시간에는 react hook 중 useMemo에 대해서 설명하겠습니다useMemo란useMemo는 React에서 제공하는 훅 중 하나로, 성능 최적화와 계산 비용을 줄이기 위해 사용됩니다. 이 훅은 주로 연산 비용이 높은 함수나 연산을 수행할 때 사용됩니다. useMemo는 두 개의 인수를 가지며 다음과 같은 역할을 수행합니다:첫 번째 인수: 계산할 함수 또는 값입니다. 이 함수 또는 값은 useMemo의 두 번째 인수인 종속성 배열이 변경될 때에만 다시 계산됩니다. 종속성 배열에 있는 값이 변경되지 않는 한, useMemo는 캐시된 값을 반환합니다.두 번째 인수 (종속성 배열): useMemo가 다시 계산되어야 하는 조건을 정의하는 배열입니다. 이 배..
2023.11.06 -
@2023/10/29 안녕하세요 lika-7입니다오늘은 React Hook Form 라이브러리의 register 메서드를 설명하겠습니다 react-hook-form이란react-hook-form이란 애플리케이션에서 폼 관련 작업을 쉽게 처리하기 위한 라이브러리 중 하나이다.쉬운 유효성 검사와 간단한 구현이 특징입니다.React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.https://react-hook-form.com/ register 메서드register는 React Hook Form 라이브러리의 메서드 중 하나입니..
React Hook Form - register 메소드@2023/10/29 안녕하세요 lika-7입니다오늘은 React Hook Form 라이브러리의 register 메서드를 설명하겠습니다 react-hook-form이란react-hook-form이란 애플리케이션에서 폼 관련 작업을 쉽게 처리하기 위한 라이브러리 중 하나이다.쉬운 유효성 검사와 간단한 구현이 특징입니다.React Hook Form - performant, flexible and extensible form libraryPerformant, flexible and extensible forms with easy-to-use validation.https://react-hook-form.com/ register 메서드register는 React Hook Form 라이브러리의 메서드 중 하나입니..
2023.10.29