반응형 리액트7 👀 useRef란? #9 이번 포스팅은 useRef에 대해여 알아보도록 하겠다. useRef를 사용하는 때는 컴포넌트의 일부의 정보를 저장하고 싶지만, 해당 정보가 업데이트되더라도 렌더링이 되지 않도록 할때 useRef를 사용한다. 이전에는 컴포넌트의 정보는 state를 통해서 저장하여 사용하는 방법을 사용하였다. 하지만 ref는 동일하게 컴포넌트의 정보를 저장하는 데 사용된다. state와 ref의 차이점에 대해서 살펴보겠다. ◼ State와 Ref의 차이점 ref state useRef(initialValue)는 '{current : initialValue}'를 반환한다. useState(initialValue)는 state와 set인 [value, setValue]를 반환한다. 값을 변경하여도 리렌더 되지 않는다. 값을 변.. 2024. 1. 10. 👀 useReducer란? #7 이번 포스팅은 useReducer에 대해 알아보려고 한다. 먼저 reducer의 역할은 컴포넌트 내부에 state변수를 업데이트하는 이벤트핸들러가 여러 개를 작성하여 사용하는 경우가 있다. 점점 이벤트 핸들러가 많아지게 된다면 컴포넌트의 내부의 코드량은 점점 증가한다. 이 문제를 해결하기 위해 state변수를 업데이트하는 로직을 reducer로 활용하여 컴포넌트 외부에서 통합하여 관리하는 역활을 한다. 그렇기 때문에 무조건적으로 reducer를 사용하는 것이 아닌 useState의 set함수를 활용한 이벤트핸들러를 구현하여 사용하는것과 같은 역할을 하기 때문에 사람들마다 reducer를 사용하는 사람과 사용하지 않는 사람으로 나눌 수 있다. ◼ useState와 useReducer 차이점 먼저 useSt.. 2024. 1. 5. 👀 컴포넌트 렌더링 과정 #5 오늘은 간략하게 React에서 컴포넌트의 라이플 사이클을 설명하여 렌더링 과정을 설명하는 것이 아닌 간단하게 컴포넌트가 언제 렌더링하는 과정에 대해서 순서를 포스팅 해보려한다. 우선 해당 포스팅에서의 React는 18버전을 기준으로 하여 작성하였다. 그렇기 때문에 이전에 버전과 다른 내용이 있을 수 있다. 먼저 React 18에서는 class 컴포넌트와 function 컴포넌트 중에서 웬만하면~ function 컴포넌트로 작성하는 걸 추천한다. 다양한 이유가 있다. 이전에는 컴포넌트의 라이프사이클을 활용하여 컴포넌트 만드는 것이 class 컴포넌트의 라이프사이클 관련 메서드를 재정의하여 작성하였으며, function 컴포넌트를 정말 간단한 컴포넌트만 작성하는 데 사용되었다. 하지만 최신의 버전에서는 다양.. 2024. 1. 3. 👀 useState란? #4 이번 포스팅에서는 React의 컴포넌트의 상호작용 방법중 한가지인 다루기 위한 useState에 대해 살펴보려한다. 일반적으로 이벤트 핸들러에 사용자 정의 함수를 추가하여 상호작용하는 것을 많이 사용했을것이다. 하지만 React에서는 추가적으로 컴포넌트의 state를 필요에 따라 업데이트하여 상호작용을 지원합니다. 일반적인 상호작용 (이벤트 핸들러) 먼저 일반적으로 사용하는 상호작용 방법중의 이벤트 핸들러를 사용한 방법에 대해서 설명해보도록 하겠다. 아래의 코드는 이벤트 핸들러를 사용한 상호작용에 대한 코드이다. function SendButton(){ const ClickHandler = (e)=>{ console.log("저장되었습니다"); } return( 저장 하기 ) } State를 활용한 상호.. 2023. 12. 23. 👀 컴포넌트 렌더링하기 #3 이번 포스팅은 컴포넌트의 랜더링 방법에 대해 살펴보려한다. 컴포넌트가 렌더링되는건 return문을 결과로 렌터링한다. 다양한 방법인 조건식이나 리스트의 기능을 활용한 렌더링 방법에 대해 알아보자. 조건식 렌더링 조건식이라고하면 일반적으로 if문, &&, || 가 떠오른다. js에서는 삼항연사자를 지원한다. 간단하게 삼항연산자에 대해 설명하고 넘어가도록하겠다. // if문을 사용한 isOK 값 할당 const type = "ok" let isOk = false; if(type === "ok"){ isOk = true; } //삼항연산자를 사용한 값 할당 const isOk = type ==="ok"? true:false; 위의 코드와 같이 if문을 삼항연산자를 이용하면 간단하게 표현가능하다. 다음은 위의 .. 2023. 12. 23. 👀 컴포넌트 구성하기 #2 컴포넌트 구성하기 #1 이번 포스팅은 React를 사용하여 React 방식의 컴포넌트 구성을 하는 방법에 대해 포스팅해보려 한다. 웹에서는 HTML의 태그를 활용하여 다양한 구조의 컴포넌트를 작성할 수 있다. React는 해당 태그 nubee.tistory.com 지난 포스팅에 이어서 만든 컴포넌트를 더욱 편리하게 사용하기 위한 방법을 알아보자. 다시 한번 언급하는 것이지만 React는 재사용성을 높이는 것에 목표가 있다. 그렇기 때문에 재사용성을 높이는 방법에 대해 알아보도록 하겠다. 컴포넌트 분리하기 이전에 만든 컴포넌트는 하나의 .jsx 파일에서 2개의 function를 작성하였다. 하지만 아래와 사진과 같이 공식 문서에 따르면 한 가지에 기능에 귀속된 것이 아닌 다양한 방면으로 사용할 수 있는 컴.. 2023. 12. 22. 이전 1 2 다음 반응형
