본문 바로가기

React128

React(28) 리액트 훅 useContext 란 useContext 란 context 를 사용할 때, (즉 할머니 컴포넌트가 특정 손주 컴포넌트 한테만 다이렉트로 데이터(용돈)를 쏴주려고 할 때) 그 귀여운 손주는 useContext 라는 훅을 사용해서 할머니의 데이터(용돈)를 받아 사용할 수 있다. (할머니땡큐) ** Context 와 Context API 의 자세한 기본 개념은 아래 포스팅을 참고해주세요. React(26) 리액트 훅 Context API 란 Context API를 사용하는 이유 React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다. 보통 상위에서 → 하위컴포넌트로 속성값을 전달하는데 상위 → 하위 → 하위 → .... devbirdfeet.tistory.com Grandmama.js - createCo.. 2021. 5. 7.
React - .prettierrc 파일 적용하기 비주얼 스튜디오 코드 (Visual Studio Code)에서 리액트 프로젝트에 .prettierrc 파일 적용하기 여러 사람과 협업이나 회사에서는 코드 스타일을 통일해야 하는 경우가 생긴다. 1 .prettierrc 파일을 프로젝트 최상단에 만들기 2 ctrl + , 를 눌러 setting을 열어주고 Format On Save 검색 + 체크 ! 2021. 3. 11.
React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 useRef를 사용한다. 특정 DOM을 선택? 구체적으로 무슨말이죠? 말 그대로 특정 태그만 지정해서 그것만 사용할 때 useRef 를 쓴다는 말이다. (only for you💛) 예를 들어 특정 엘리먼트의 크기를 가져와야 한다던지, 스크롤바 위치를 가져오거나 설정해야된다던지, 또는 포커스를 설정해줘야된다던지 등이 있다. 또한 그래프라던가 비디오 등 외부 라이브러리를 사용할 때도 특정 DOM 에다 적용하기 때문에 DOM 을 선택해야 하는 상황이 발생 할 수 있다. .. 2021. 3. 10.
React - npm start 에러 4058 ENOENT: no such file or directory 문제상황 create-react-app 을 하여 리액트를 설치하고 npm start로 실행시키려 할 때 에러가 떴다. 예전에 똑같은 에러가 났을 때는 install 명령어 오타로 인한 문제였는데 이번에도 같은 에러이다. 왜 나에게 이런일이? 하나하나 따져보았다. - 오타가 났는가? 아니다. - package.json 를 열어 확인? 파일은 잘 있다. 문제가 없다. - 해당 경로에 package.json이 있는가? 하위폴더에 들어있군.. 그렇다면 npm 설치과정을 한번 더 살펴보자. 다른 분의 블로그에서 참고한 react-app 설치과정이다. - 2번의 과정을 생략 해버렸다. 미리 경로를 변경한 뒤 설치하면 괜찮은 줄 알았기 때문이다. 문제해결 cd my-app을 해주고 실행명령어를 입력해주니 실행성공! .. 2021. 3. 10.
React(26) 리액트 훅 Context API 란 Updated 2021/05/07 Context API를 사용하는 이유 React 에서 일반적인 값을 전달하는 방법은 하향식(부모→자식)으로 전달해야한다. 보통 상위에서 → 하위컴포넌트로 props를 통해 속성값을 전달하는데 상위 → 하위 → 하위 → .... → 하위 처럼 많은 수의 컴포넌트를 거쳐 전달하게 되면 코드를 계속 하위로 toss 해줘야 한다. 이 방식은 Level이 깊어질수록 불편함을 야기한다. 이때 Context API를 이용하면 상위 컴포넌트에서 직접 하위 컴포넌트로 데이터를 전달할 수 있다. 중간에 있는 컴포넌트는 콘텍스트 데이터의 존재를 몰라도 되므로 속성값을 반복해서 내려주던 문제가 사라진다. 1. 선언하기 createContext 함수를 호출하면 콘텍스트 객체가 생성된다. 괄호 .. 2021. 3. 8.
React(25) 리액트 훅 useEffect란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. useEffect 함수형 컴포넌트 안에서 useState로 state값을 선언하고, 값 자체를 변경할 수 있는 수단(set함수)를 마련했다면, (한마디로 준비물 역할?) useEffect()는 화면 렌더링이 될 때마다 state라고 부르고 data라고 읽는 state값을 내가 필요한 데이터 모양새로 바꿔 업데이트할 때 사용된다. useEffect( (안에) => { 익명 함수 } ) 로 useState로 선언한 state값을 내가 필요한 모양새로 바꿔 화면 렌더링이 될 때마다 업데이트할 수 있다. 그래서 클래스형 컴포넌트의.. 2021. 3. 5.
React(24) 리액트 훅 useState란 Updated 2023/02/23 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? 사용자가 웹에서 뭔가 클릭도하고 입력도 하고 이것저것 하면서 일어나는 모든 동작이 상태라고 뭉뚱그려 이해를 하였다. 웹이랑 사용자랑 데이터로 핑퐁하는 와중에 당연히 값을 데이터에 넣어서 보내겠지. 그게 상태값인 것 같다. useState - useState는 컴포넌트에서 state값을 추가할때 사용된다. 함수형 컴포넌트에서는 클래스형 컴포넌트처럼 state를 사용할 수 없어, Hook을 사용해서 state와 같은 기능을 할 수 있도록 만들어주었다. - 하나의 useState 함수는 하나의 상태 값만 관.. 2021. 3. 3.
React(23) 리액트 훅이란? side effect를 알아야 react hook개념이 이해가 되고 그 hook 안에 useState와 useEffect가 속해있는 것이다. 01 Side Effect란? React 컴포넌트가 화면에 1차로 렌더링된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 흔히 Side Effect라고 한다. 예를들어 데이터를 가져오려고 외부 API를 호출할 때, 일단 화면에 렌더링할 수 있는 것은 1차로 먼저 렌더링하고 실제 데이터는 비동기로 가져오는 것이 권장된다. 왜 먼저 렌더링하냐면 연동된 API가 응답이 늦거나 없을 때 데미지(답답함)을 최소화 시켜 사용자 경험 측면에서 유리하기 때문이다. → 한마디로 요구되어지는 이펙트 이외에 다른 이펙트가 발생하는 현상이라고 생각하면 된다. → Hook은 이 sid.. 2021. 2. 25.
React(22) <b> <br> 등 HTML 태그 제거하기 문제상황 뉴스기사를 받아왔더니 HTML 태그가 여과없이 보인다. 어떻게 해야할까? 문제해결 - replace와 정규식을 사용하여 html태그 뿐 아니라 변환되지 못한 기호들도 전부 공백으로 치환하여 해결 ! - replace()란 ? (더보기 클릭) 더보기 str_text.replace("찾을 문자열", "변경할 문자열") 자바스크립트의 replace()함수로 바꿀 문자열을 직접 입력하거나 또는 정규표현식을 사용할 수도 있다. 2021. 2. 22.
반응형

티스토리툴바