DEV/REACTJS
-
React / Redux [1] - Redux 기본 개념DEV/REACTJS 2022. 12. 13. 13:38
해당 게시물은 udemy-React 완벽가이드 강의와 Redux 공식 문서를 바탕으로 작성된 글입니다. [리덕스] 크로스 컴포넌트 또는 앱와이드 상태를 위한 상태관리 시스템 강의에 따르면 보통 리액트의 상태를 세가지로 나눌 수 있음 1. 로컬 상태 단일 컴포넌트에 속한 상태 보통 useState나 useReducer를 사용해서 상태를 관리함 2. 크로스 컴포넌트 다양한 컴포넌트에 속한 상태 보통 useState나 useReducer를 사용해서 상태를 관리함 혹은 prop chain, prop drilling을 통해 관리 3. 어플리케이션 전체 상태 앱 전체 혹은 모든 전체에 대한 상태 관리 보통 useState나 useReducer를 사용해서 상태를 관리함 혹은 prop chain, prop drilli..
-
ReactNative / Style 1 - StyleDEV/REACTJS 2022. 12. 1. 23:04
Style · React Native With React Native, you style your application using JavaScript. All of the core components accept a prop named style. The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rathe reactnative.dev - 위의 내용을 빌려옴 - react native의 스타일은 css in js 형식으로 사용한다. 대충 말하자면 react 파일에 js코드로 css를 때려 넣겠다는 말이다. 근데 웹과 C..
-
React / 비동기 렌더링 Suspense에 대해 공식문서로 알아보기 [기초편]DEV/REACTJS 2022. 8. 18. 00:44
오늘 선생님께서, 약간이나마 suspense 이야기를 해주셨는데, 너무 스치듯 지나가서 궁금해서 공부해봄 TS공부하려다가, TS는 해본적이 있으니 담에 다시 공부하기로했음 그럼시작 React Suspense Intro 기본적으로 suspense는 비동기 작업이 처리될때까지 fallback에 할당된 컴포넌트가 렌더링했다가 그 안의 자식요소가 작업이 처리되면 리랜더링하면서 컴포넌트가 업데이트 되는 구조를 가짐. 짧게말해 오래걸리는 작업 전에 미리 보여줄 무언가를 셋팅해놓을 수 있다는 것임. 그럼 왜 이걸 사용하냐 코드가 깔끔해지기 때문에! 라고 말할수도 있지만 그 외에도 다양한 이유가 있으니 아래에 설명을 하겠음 우선 이전에 비동기작업 처리의 코드를 살펴봄 이전에는 이렇게 패치를 시작하고, set을 돌리는 ..
-
React / Recoil 의 기초 개념과 기본 동작을 쉽게 설명해봤다( Atoms, Selector)DEV/REACTJS 2022. 8. 15. 16:23
Recoil Recoil의 사전적 의미는 '반동' 이라는 뜻인데 이 라이브러리와 어떤 관련이 있을까. Recoil은 전역으로 상태를 관리할 수 있는 '페이스북'에서 만든 라이브러리다! 여기서 벌써 두 개의 문제가 나온다. 전역 > 간단히 말해 내가 만드는 app 전체의 공간을 의미한다고 이해하면 쉽다. 상태 > 간단히 말해 변수, 그리고 변수를 바꿀수 있는 함수들(set)을 의미한다고 이해하면 쉽다. 기존 Redux, MobX를 써본 경험은 없지만, 이것들과 굉장히 유사하다던데 전자로 말한 라이브러리들은 전역 상태관리가 아닌, 엄연히 말하자면 외부요인으로 내부를 변경시키는 그러한 개념인것 같다. Recoil은 내부에서 React의 관리가 가능한데, 바로 떠올릴 수 있는것이 useContext와 어떤 차이..
-
React / img src 이미지가 제대로 나오지 않을때 해결 방법DEV/REACTJS 2022. 8. 14. 10:30
개인 프로젝트 진행하면서 발생했던 오류?! 1시간동안 고생하고, 해결방법을 보고도 이해하지 못했고, 이전에도 비슷한 문제를 해결하지 못하고 억지스러운 방법으로 해결했던 기억이 있어, 이번엔 꼭 기록해야겠다고 생각했음 [ 문제 ] 뷰러곡률의 설명에 필요한 이미지를 public에 넣어 데이터를 받아오려고 했다. 그리고 img의 src 속성에 public주소를 써넣었는데 애가 반응을 안한다. 막 src에서는 외부에 접근할수 없습니다 같은 오류도 계속떴음 뭔가 접근방식의 문제인가 싶어서, json파일로 해당 데이터를 빼서 해결해보려고도 했는데 여전히 안먹음 참고로 현재 사항을 말하자면 public - assets - images 안에 이미지 파일들이 있는 상황이고 src - components - main 에 ..
-
ReactJS / calss와 function 의 비교, 그리고 Hello HookDEV/REACTJS 2021. 12. 1. 23:08
*생활코딩의 React class vs function style을 참조하였습니다* 01. class VS function style React의 컴포넌트 선언에서는 class 선언과 function 선언 두 가지가 있다. class 선언의 경우 REACT의 기능을 full로 이용할 수 있지만 리액트의 문법을 잘 알아야 한다는 단점이 있다. class ClassStyle(){ render(){ return(); } } 의 형식으로 컴포넌트를 생성한다 function 선언의 경우 REACT의 기능을 알지 못해도, 자바스크립트의 기본 문법을 통해 컴포넌트 구현이 가능하다. 하지만 class 선언에서만 사용 가능한 몇 가지 기능을 사용하지 못하는데, 대표적으로 state, lifecycle 등이 있다. fun..
-
ReactJS / useEffect(유즈 이펙트라 쓰고 버터 플라이 이펙트라 읽는다.)DEV/REACTJS 2021. 11. 16. 00:43
우리는 예상치 못한 현실에 자주 부딛히곤 한다. 이거티비하고 뭘 실행할려고 하다 보면 저쩔티비 하면서 이상한 결과가 나오는 마법을 자주본다. 코딩도 뭐 다르진 않다. React 같은 경우에는 내가 만든 하나의 도구(도라에몽 도구랑 비슷한거임)를 개개별로 만들수 있는데, 이 도구를 활용해서 뭔가를 실행하면 전체 도구함이 리프레쉬 되면서 내용이 바뀌게 된다. 하지만 이건 좀 불합리하다고 느껴진다. 100개의 도구가 있는데 1개의 도구만 바꾸기 위해 100개를 전부다 새로 업데이트 할 순 없지 않은가. 그때 사용하는게 React의 useEffect다. useEffect는 import useEffect; console.log("rere"); useEffect( () => {A} , [B] ); 와 같은 형식으로..