React - useEffect()

React Hook 중에는 useEffect라는 Hook이 존재한다. useEffect란 리액트에서 기본적으로 제공해주는 함수로써, useEffect함수가 포함된 컴포넌트가 처음 마운트되거나 컴포넌트가 리렌더링 될 때, 또는 선언된 변수의 값이 변경되거나 redux store의 값이 변경될 때 실행할 구문들을 정의해놓은 함수이다. 기본적으로 React에서는 state값이 변경되면 해당 컴포넌트가 다시 랜더링된다. function Welcome(props) { const [count, setCount] = useState(0); return ( setCount(count + 1)}>증가 count : {count} ); } 이때, onClick에 함수의 참조를 넣는것이 아니라 위와 같이 함수 호출식을 그대..

• format_list_bulleted React
• · 2023. 10. 29.
• textsms

React - utils.ts:781 Uncaught Error: useHref() may be used only in the context of a <Router> component.

문제 상황 리액트로 페이지 이동을 할 때 보통 Router를 통해서 페이지 네비게이션을 하는데 이때 utils.ts:781 Uncaught Error: useHref() may be used only in the context of a component. 이라는 오류를 만났다. 마침 스택오버플로우에 나와 똑같은 현상을 겪은 사람이 질문을 올려줬고 정확하게 답변해준 사람이 있었다. https://stackoverflow.com/questions/70220413/error-usehref-may-be-used-only-in-the-context-of-a-router-component-it-wor Error: useHref() may be used only in the context of a component...

• format_list_bulleted React
• · 2022. 11. 30.
• textsms

React - State 개념과 useState Hook

State 개념 리액트에서 State는 Component의 데이터 상태를 말한다. 한마디로 State란 개발자가 정의한 변경 가능한 데이터를 말하며 이는 자바스크립트 객체로서 존재한다. KeyPoint는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다는 점이다. 왜냐하면 State가 변경될 경우 Component가 다시 렌더링 되기 때문에 그 외의 데이터가 State로 작성되면 불필요하게 다시 렌더링되어 성능저하를 초래하기 때문이다. 따라서 렌더링이나 데이터 흐름에 사용되지 않는 값들은 Component안에 instance field로 정의해서 사용한다. useState useState는 React의 내장 Hook 중 하나로, 함수형 컴포넌트에서 상태를 관리할 수 있게 해준다. 이는 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - component 합성과 추출

Component 합성 리액트에서는 Component안에 또 다른 Component를 사용할 수 있다. 따라서 복잡한 화면을 여러개의 Component로 구성할 수 있다. 예시) function Welcome(props) { return Hello, {prop.name} ; } function App(props){ reutrn( ) } ReactDom.render( , document.getElemnetById("root") ); 위 코드를 보면 Welcom 컴포넌트를 prop 를 다르게하여 여러번사용하는 것을 볼 수 있다. App이라는 Compoent는 Welcome이라는 컴포넌트를 포함하고 있는데 이러한 것을 컴포넌트 합성이라고 한다. Component 추출 컴포넌트 합성과 반대로 복잡한 컴포넌트를 ..

• format_list_bulleted React
• · 2022. 9. 3.
• textsms

React - Component 개념 정리

Component란? 리액트의 컴포넌트는 아래의 그림과 크게 클래스 컴포넌트와 함수 컴포넌트로 나누어 볼 수 있다. 리액트 초기버전에는 클래스 컴포넌트를 주로 사용하였으나 사용의 불편함이 대두되어 이후에는 함수 컴포넌트를 개선하여 사용하게 되었다. 함수 컴포넌트를 개선하면서 만들어진 것이 훅(Hook)이다. 훅이란 class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다. 이 훅을 통해서 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다. Function Component(함수형 컴포넌트) 모든 리액트 컴포넌트는 pure function과 같은 역할을 해야한다고 했다. 이는 곧 리액트 컴포넌트를 일종의 함수라고 생각한다는 것이다. 다음의 예시..

• format_list_bulleted React
• · 2022. 9. 2.
• textsms

React - props

props propertys의 약자로 React에서 Component의 속성을 의미한다. 이전 포스팅에서 이야기 했던 붕어빵이야기를 다시하자면 Component는 붕어빵 틀이고 Element는 만들어진 붕어빵과 같다고 했다. 그럼 여기서 props는 붕어빵의 속재료와 같다. 같은 붕어빵 틀에서 만들어졌더라 하더라도 안에 슈크림을 넣을지 팥을 넣을지에 따라 붕어빵이 달라지는 것처럼 Compoent를 통해서 만들어진 Element도 props에 따라서 틀은 같지만 내용은 다른 것들이 만들어지는 것이다. 이렇듯 props는 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체를 의미한다. props 특징 1. read-only : 값을 변경할 수 없다. 붕어빵이 다구워졌는데 속재료를 바꿀 수 없는 것과..

• format_list_bulleted React
• · 2022. 8. 29.
• textsms