전체 글

[React_study] useEffect (실행조건 & clean up function)

* useEffect에 넣을 수 있는 실행조건 ( [ ] ) [ ] : useEffect에 실행조건을 넣을 수 있는곳 원래 실행조건을 넣지 않으면 mount, update시 실행된다. 실행조건을 추가하게되면 실행조건의 state가 변할 때만 실행이 된다. useEffect(()=>{ console.log("change") }, [count]) useEffect()의 두번째 파라미터로 [ ] 를 넣을 수 있음 거기에 변수나 state같은 것들을 넣을 수 있음 그렇게 하면 [ ]에 있는 변수나 state가 변할 때만 useEffect안의 코드를 실행해준다. 위의 예시는 count라는 변수가 변할 때만 useEffect안의 코드가 실행된다. (참고) [ ] 안에 state 여러개 넣을 수 있음 (참고) [변수..

[React_study] Lifecycle & useEffect

* Lifecycle - 컴포넌트에는 Lifecycle이라는 개념이 있다. 생성 (mount) 재렌더링(update) 삭제(unmount) 컴포넌트가 Lifecycle을 하게 될 때 특정 코드를 실행할 수 있다 갈고리(hook)을 달아서 코드를 넣어주면 됩니다. 그럼 페이지 장착시, 업데이트시, 제거시 코드실행가능 그래서 저걸 Lifecycle hook 이라고 부릅니다. componentDidMount(), componentDidUpdate(), componentWillUnmount() 의 역할을 한다. * React에서 Lifecycle hook사용법 (예전 버전) class 문법을 이용한 컴포넌트 생성 및 함수명을 작성해주어 특정 Lifecycle에서 코드 실행 class Detail2 extends..

[React_study] styled-components (CSS in JS)

* styled-components - 컴포넌트가 많은 경우 스타일링을 하다보면 불편함이 생긴다. class를 만들고 까먹거나 중복해서 만든경우 갑자기 다른 컴포넌트에 원하지 않는 스타일이 적용되거나 CSS 파일이 너무 길어져서 수정이 어렵거게 된다. 이런 경우가 발생 할 수 있다. 그래서 스타일을 바로 입혀서 컴포넌트를 만들어버릴 수도 있는 styled-components 라는 라이브러리를 설치하여 이용하면 된다. * styled-components 설치 - 터미널에 아래의 명령어를 입력해주어서 설치한다. npm install styled-components - 사용하고 싶은 컴포넌트 상단에 아래의 명령어처럼 import해준다. import styled from 'styled-components' * ..

[JavaScript][clean-code] 함수, 메서드, 생성자

* 함수, 메서드, 생성자 자바스크립트의 함수는 많은 일을 한다. 함수는 일급객체로 동작하다보니 고차함수로 쓸 수도 있고 함수형 프로그래밍도 가능 그렇다보니 자바스크립트의 함수의 사용도가 넓은것에 따라서 오는 어려운 부분이 있다. 어려운 부분중 하나인 함수, 메서드, 생성자 구분이다. * 자바스크립트의 함수는 1급 객체 변수나, 데이터가 담길 수 있다. 매개변수로 전달 가능 (콜백 함수) 함수가 함수를 반환 가능 (고차 함수) * 자바스크립트 this - this가 전부 다른고 사용도 또한 다르다. 함수의 this func(); // 전역객체 메서드에서의 this 메서드란?? 객체에 의존성이 있는 함수, OOP 행동을 의미 메서드에서의 this는 호출된 객체를 바라본다. obj.method(); 생성자 ..

[JavaScript][clean-code] 직접 접근 지양하기

* 직접 접근 지양하기 - 직접 접근이 가능하면 발생할 수 있는 문제를 예시를 통해 확인 * 예시 const model = { isLogin : false, isValidToken : false }; function login() { model.isLogin = true; model.isValidToken = true; } function logout() { model.isLogin = false; model.isValidToken = false; } someElement.addEventListener('click', login) someElement를 click하였을때 login function이 실행된다. 이때 model에 쉽게 접근할 수 있는점이 문제점이 된다. * 해결방법 this를 사용하거나 객..

[React_study] React Router (setting & routing & Link)

* React Router - 만약 페이지를 나누고 싶다면 일반 html, css, js에서는 그냥 html 파일을 여러개 만들면 된다. 하지만 리액트에서는 html파일을 하나만 사용한다. 그래서 리액트에서는 누가 다른 페이지 요청을 하면 내부에 있는 를 바꿔준뒤 render해주면 된다. react-router-dom이라는 외부 라이브러리를 이용해 구현하는게 일반적이다. * React-router-dom 설치 및 셋팅 방법 아래의 명령어를 이용해 설치 npm install react-router-dom@6 셋팅은 index.js 파일에서 import { BrowserRouter } from "react-router-dom"; 을 이용해 을 감싸주면 된다. import { BrowserRouter } fr..