useState8 React(94) useState 알아보기 (공식문서정리) updated 03/09/23 리액트에서 상태(state) 값은 매우매우 중요하다. 화면에서 일어나는 모든 변화들은 변수(state) 안에 담아서 표현될 수 있고, 업데이트도 자주 일어나기 때문에 렌더링(a.k.a 새로고침) 되면서 항상 최신 데이터(a.k.a state)를 유지해야 한다. 너무너무 기본이지만 확실히 알고 넘어가고자 공식문서를 참고하여 한번 더 정리해보았다. React(93) useState 알아보기 (공식문서정리) useState 는 리액트 내장 함수이고, state 를 나타내는 변수로 사용할 수 있다. useState 는 리액트 훅이기 때문에 컴포넌트 최상단에서 호출하여야 한다. 조건문이나 반복문에서의 사용은 안된다. (strict 모드에서는 pure func 인지 검사을 위해 2번 .. 2023. 2. 21. React(92) useRef 알아보기 (공식문서 정리) 요즘은 공식문서 읽기에 재미가 붙었다. 리액트 beta 공식문서를 통해 기본적인 훅들과 기능들을 다시한번 훑어보며 정리 중이다. 오늘은 useRef 에 대해서 읽어보았다. 그러다 추억의 포스팅도 발견했다. 2년 전쯤 정리했던 포스팅인데 정말 무지했음을 다시 한번 느꼈다. (화이팅🥲) React(27) 리액트 훅 useRef 란 useRef를 사용하는 이유 자바스크립트에서 특정 DOM (태그)을 선택할 때 getElementById, querySelector 같은 DOM Selector 함수를 사용한다. 우리 리액트(특히 함수형 컴포넌트)에서는 특정 태그를 선택할 때 us devbirdfeet.tistory.com React(92) useRef 알아보기 (공식문서 정리) useRef 는 렌더링이 필요하지 .. 2023. 2. 1. React(87) 여러 버튼 중 하나 클릭시 색상변경하기 여러 버튼이 있을 때, 하나만 클릭하면 색상이 변하게 만들어보자 워낙 비슷한 요구사항들이 많기 때문에 그동안 비슷한 포스팅도 여럿 올린 것 같다. 하지만 과신과 방심은 금물이다 예전포스팅보다 조금 더 리팩토링된 코드로 다시한번 복습해보자 :) React(87) 여러 버튼 중 하나 클릭시 색상변경하기 새발컴퍼니 회원모집 모달창이 있다. 세가지 회원 타입이 있는데 하나를 선택해서 클릭하면 색상이 변경된다고 해보자 과거의 새발자가 작성했던 방식은 타입과 타이틀이 분리되어 HTML 태그에서 합쳐서 보여주는 방식이였다. 지금의 새발자는 객체형식으로 따로 노는 { 타입과 타이틀 } 을 묶어보았다. const items = [ { type: 'general', title: '일반 회원 가입하기', }, { type:.. 2022. 11. 7. React - useState 동작원리 이해하기 다음은 웹 브라우저 접속부터 - 페이지 내의 리액트 코드 동작까지의 과정을 순서대로 정리한 포스팅이다. 1. DNS 이해하기 Network - DNS 이해하기 + 기본 동작원리 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이렇게 포스팅을 해본다. 한 devbirdfeet.tistory.com 2. 브라우저 렌더링 이해하기 Network - 브라우저 렌더링 이해하기(Feat. Virtual Dom) 요즘 가장 큰 고민은 브라우저와 react 의 동작원리 자체에 대한 이해도가 부족하다는 것이다. 며칠 전 발생했던 이슈가 motivation 이 되어 제대로 공부를 해보기로하고 이.. 2022. 6. 15. React(34) 리액트 훅 - 부모가 자식에게 props 전달하기 사람이 커뮤니케이션을 할 때, 정보를 말이나 문자로 주고 받는다. 그 정보를 바탕으로 행동을 하여 결과를 만든다. 컴퓨터로 커뮤니케이션을 할 때도 마찬가지이다. 정보를 컴퓨터 언어로 데이터 형태로 넘기고 받는다. 그리고 결과를 다양한 방식으로 출력한다. 그래서 내가 느낀 소프트웨어 프로그래밍의 핵심은 데이터를 어떻게 가공해서 전달하느냐 인 것 같다. 프로그램을 만들다 보면 느끼겠지만 데이터를 넘기고 받는 과정이 항상 필요하다. 그래서 정보처리기사 자격증 자체도 '정보처리' 라는 단어를 쓰는 것이 아닐까 싶다. React(33) 리액트 훅 - 부모가 자식에게 props 데이터 전달하기 리액트에서도 마찬가지이다. 데이터를 부모컴포넌트에게서 물려받는 방법을 알아보자. 준비물은 props 라는 속성이다. 부모컴.. 2021. 8. 13. React(33) 리액트 훅 - useState 기본구조 리액트 훅에서 useState 의 기본 구조를 살펴보자. 나에게는 이번 포스팅까지 포함하면 리액트 세번째 복습이다. 똑같은 내용 공부해서 별다를 것 없을 수도 있지만, 나한테는 반복적인 공부를 통해 변수와 같은 단편적인 개념에서 전체적인 패턴이나 구조와 같은 포괄적인 개념까지 시야가 넓어지는 것을 경험하고 있다. 혹시 useState 에 대한 개념을 이해하게 된 지난 포스팅이 궁금하시다면 ↓아래를 클릭해주세요. React(24) 리액트 훅 useState란 Updated 2021/05/06 React Hook은 함수형 컴포넌트에 기능을 추가할 때 사용하는 함수다. 함수형 컴포넌트에서 상탯값을 사용할 수 있고 자식요소에 접근 할 수도있다. 내가 이해한 상태값? (더보기클릭) devbirdfeet.tisto.. 2021. 8. 12. 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. 이전 1 다음 반응형
