분류 전체보기
-
[리액트를 다루는 기술] Hook (useState, Effect, Reducer, Ref) 1편프로그래밍/React 2023. 6. 18. 15:52
useState 가장기본적인 Hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다. ( useState를 구조분해할당으로 받은 것 뿐임) const [name, setName] = useState(''); 인자로 초깃값이 들어가는데 아무거나 다 잘 먹는다. 호출하면 배열이 반환되는데 첫번째 원소는 상태값 두번째 원소는 상태를 바꾸는 함수가 들어있으며 이 함수는 세터함수라고 한단다 한 컴포넌트 안에 여러번 사용해도 상관 없단다(한개의 useState는 하나의 상태만을 관리하므로 여러번 사용해야 할 때가 분명있다) 리액트를 처음배운다면 useState가 시작이다 함수형업데이트 useState로 생성한 state가 변경이 될 때마다 랜더링이 일어나게 되는데 리액트 환경은 랜더링을 최소한으로 줄이고 싶어한..
-
[리액트를 다루는 기술] 컴포넌트프로그래밍/React 2023. 6. 18. 15:47
컴포넌트의 종류와 특징 class형 컴포넌트 시작하면서 나오는 내용이라서 기억하는거지 요새 잘 안쓰인다고 한다 (Hook 기능이 추가되고 나서) 그래서 읽을 수 있을 정도의 능력만 갖추면 될듯.. 클래스 형태를 띄고 있어서 누가봐도 클래스형으로 보임 render()함수가 꼭 필요함 꼭 선언해주어야함(retrun 값이 이 함수 안에 들어가야한다) state 설정 시에 2가지 방법이 있는데 생성자를 선언해서 super와 this를 써서 초기화 해주는 방식과 그냥 state 객체를 만들어 주는 방법 2가지가 있다 함수형 컴포넌트 클래스형 컴포넌트보다 이점이 많은데 그중 하나가 메모리를 덜 사용하고 크기가 작다는 것(크게 중요 x) Hook을 활용해서 라이프사이클 기능과 Component 기능 임의 메서드 생성..
-
[리액트를 다루는 기술] JSX && 알쓸신잡프로그래밍/React 2023. 6. 18. 14:34
JSX 란? 자바스크립트의 확장문법으로써 상당히 HTML과 비슷한 모습이다. 브라우저가 실행되기 전에 번들링과정에서 바벨을 사용해 JS로 변환되기 때문에 마음껏 리액트에서 사용된다.장점 : HTML이랑 유사해서 보기 좋음 ㅎ 사용 팁 : falsy한 값 중 0은 false로 나타나지 않는다. undefined 는 함수안에서 사용하지 말자 근데 JSX에서는 가능하다(tag안에 쓸 수 있다) 알쓸신잡 ES Line && Prittier 좋구요~ import 는 모듈을 불러오는 기능을 하는 놈으로써 node에서 제공하는 기능이란다 리액트는 웹펙을 이용해서 번들링을 한단다로더의 설치는 따로 해주어야하지만 creat react-app에서 자동으로 설치해준단다 번들링은 나중에 따로 찾아봐야지^^
-
[CS Study] fetch / axios && API란 무엇일까?네트워크/CS Study 2023. 6. 18. 13:16
API 란??? 하나의 프로그램에서 다른 프로그램으로 데이터를 주고 받기 위한 방식으로 상당히 추상적인 개념이기 때문에 잘 짚고 가야하는 부분이다. 식당 메뉴판을 상상하면서 API를 이해해 보자 (김치찌개를 원하면 아줌마에게 김치찌개 달라고 해야지 김치찌개인데 참치 넣고 햄넣고 사리까지 듬뿍 넣어서 주세요 하면 안된다;; ===) 작성방식 어떤 요청방식이 들어가야 한다 ( get, post 와 같은 것이 요청방식임) 어떤 자료를 요청할 지 적어야 한다 (대표적으로 URL) 추가정보는 넣든말든 (유저정보 기타등등 URL에서 ? 뒤에 들어가는 내용임) 웹에서만 작동하는 개념이 아니기 때문에 윈도우 데이터 관리 등등 걍 데이터를 주고받는 곳에서는 다 쓰이는 용어이기 떄문에 잘 안고가즈아... Fetch / A..