Front-End9 TIL 230814 : 리액트를 접해보기 3 (useEffect) 지난 시간에 언급한 프론트 특강은 자바 스프링 과정을 배우는 입장에서 프론트를 손쉽게 구현하기 위해 ChatGPT를 활용하는 프로세스를 맛보여줬었다. jwt인증정보 확인하는 코드를 물어봤다. useEffect..? 처음보는 개념에 그냥 복붙할 수 없고 알고 써야 잠자리가 편하기 때문에 useEffect가 뭔지 정리해본다. useEffect? 일단 이 기능을 한 줄로 말하면 특정 조건시 실행해주는 조건문 같은 그런 기능? 기본 구조는 아래와 같다. //기본 구조 useEffect(실행 함수(), [변경시 실행될 변수]) //예시 const [info, setInfo] = setState('초기값') useEffect(()=>{ console.log('useEffect에 지정된 함수가 실행됐습니다.') },.. 2023. 8. 17. TIL 230811 : react 접해보기 2 (useState, hooks) 지난 시간 리액트 기본 환경세팅과 컴포넌트의 동작 구조에 이어서 리액트의 가장 기본이 되는 훅 중 두가지인 useState와 useEffect에 대해 정리해보려 한다. React hooks 리액트 훅은 16.8버전에 도입된 라이브러리로서, 기존의 클래스를 이용했던 개념을 대체해 함수형 컴포넌트에서도 이를 편리하게 사용할 수 있게 해주는 개념이다. 이에 리액트에서는 기본적으로 제공하는 hook들이 몇가지 있는데 아래와 같다. 기본 지원 hook 1. useState 컴포넌트의 state(상태)를 관리 할 수 있다. 상태에 따라, 다른 화면 출력 2. useEffect 렌더링 이후에 실행할 코드를 만들수 있다. 어떤 변수가 변경될때마다(의존성), 특정기능이 작동하도록 할 수 있다. 3. useContext .. 2023. 8. 17. TIL 230810 : react 접해보기 1 (JSX) 특강으로 제공된 프론트엔드 내용에 react가 들어간다. 예전부터 보기는 많이 봐왔는데, 등장한 김에 react도 한번 공부해볼까 한다. vue.js 랑 고민이 좀 되긴했는데 아직은 react관련 자료도 많은것 같고 web-app 기반이라 큰 틀에서는 얼추 비슷한 내용도 있어서 react로 이어나가고자 한다. 사전 세팅 node.js 설치 (LTS추천) -> npm, npx 사용할 수 있다. create React App 라이브러리를 사용해서 기본 프로젝트를 만들어준다. npx create-react-app my-react-app react-router-dom 의존성 추가 npm install react-router-dom react 동작 기본 구조 index.html -> index.js -> app... 2023. 8. 10. 이전 1 2 다음
