FindNewThing FindNewThing

순수 함수- 입력이 같으면 항상 같은 출력을 반환하고, 외부 상태를 변경하지 않는 함수- 사이드이펙트가 없는 함수로,--> 어떤 함수에 동일한 인자를 주었을 때 항상 같은 값을 리턴하는 함수--> 외부의 상태를 변경하지 않는 함수입니다. 사이드이펙트(부작용)란? 부작용(side effect)이라는 표현이 이름 때문에 부정적으로 들릴 수 있지만,실제로는 '필요하지만 제어되어야 하는 외부 영향'을 뜻하는 중립적인 기술 용어예: 아래는 모두 "부작용"- setState() 컴포넌트 상태 변경 (외부 변화)- console.log() 콘솔에 출력 (외부에 영향)- fetch() / axios.get() 네트워크 요청 (I/O 발생)- DOM 조작 (document.qu..

CSS-in-JS는 자바스크립트(.js)파일 안에서 css를 작성하는 방법이다. CSS-in-JS 방식을 쓰는 여러 라이브러리들이 있는데 대표적으로 styled-components이 있다. 예)const style = { backgroundColor: 'blue', color: 'white',};function Button() { return Click;} 왜 CSS-in-JS가 등장했을까?전통적인 CSS의 문제점:- 전역 스코프: 클래스명 충돌 잦음- 스타일 재사용 어려움: 모듈화, 조건부 처리 불편- JS와 CSS 분리: 컴포넌트 기반 개발 방식에 비효율적 CSS-in-JS는 이를 해결하기 위해 등장한 패러다임CSS-in-JS의 주요 특징특징 설명컴포넌트 스코프 스타일링CSS가 컴..

컴포넌트 props의 리랜더 방지개발을 하다보면 외부 라이브러리 ui를 목적에 맞게 커스터마이징을 해야할때가 있다. Wrapper Component 패턴을 이용해서 커스터마이징을 할 수 있는데, 이때 주의해야할 점이 있다. 예)render={() => } 기존에 이렇게 렌더링이 이어지는 부분을 render ={(props)=>} 으로 수정하고 const WrapperComponent = (props) => ( );이런식으로 커스텀 컴포넌트를 만든다음 대입을 한다.그러나 문제가 있다. ..

JSX 요소를 map함수 안에서반복문으로 반복 렌더링이 될 때 안에 반복되는 요소에 key의 값을 지정해야한다. 가끔 index를 key값으로 지정하는 경우가 있는데, 이러면 요소의 순서가 바뀌거나 변경이 일어났을때 key값은 그대로고 표면적인 값만 변경되어 상태가 꼬인다. key는 React가 DOM을 효율적으로 업데이트하는 데 쓰이는 기준이다.React는 리스트를 렌더링할 때 각 자식 요소에 고유한 key 값을 요구한다.그래서 key값은 고유해야 하며 보통 map함수에서 고유한 id값으로 해야한다.

useRef의 값을 초기화할때와 사용 방법에는 두가지가 있다.1. DOM 참조2. 상태저장/보전(직접 값을 초기화)1번같은 경우에는 같은 DOM 요소에 같이 참조를 걸면 을 렌더링 시, React가 state.current에 해당 DOM 요소를 넣어준다.그러면 state.current.value 같이 DOM요소에 직접 접근해서 값을 다룰 수 있다.2번같은 경우는 state.current = 1; 이런식으로 원하는 값을 설정해서 초기화하고 사용할떄도state.current으로 가져와서 값을 쓴다.때문에 useRef를 어떤식으로 사용할 건지에 따라서 값을 가져오는 방식이 다르니 주의할 것

리액트에서는 변수를 사용할때 useState를 이용해 상태 관리와 리랜더링을 할 수 있다. 하지만 해당 변수의 값변경이 리랜더링이 필요없을 때는 useState를 이용하는건 불필요하다.특정 이벤트가 동작했을 때 useEffect()를 타도록 개발을 하고 있었다. 그렇기 때문에 의존성 배열에 useState를 통한 변수를 넣을지 , useRef()를 통한 변수를 넣을지 고민하다가문득 로컬변수와 useRef()의 차이점에 대해 정리가 명확하게 되지 않았다. 우선 useRef()는 useState처럼 값이 변경됐을때 리랜더링을 발생시키지 않지만, 동일하게 값을 유지하고 관리할 수 있는 리액트 훅이다.그렇다면 로컬 변수 또한 값이 변경됐을 때 리랜더링을 발생시키지 않는데, 그럼 어떤 상황에서 뭘 써야할까? 차이..

parseFloat()는 자바스크립트의 전역 함수로,문자열을 부동소수점 수(float)로 변환하는 역할을 한다.즉, 주어진 문자열에서 숫자로 변환할 수 있는 부분을 파싱하고, 이를 반환한다.  [작동방식] 문자열의 앞쪽부터 숫자를 인식(공백은 무시되지만, 숫자가 아닌 문자가 나오면 파싱을 중단합니다.)변환 가능한 숫자를 부동소수점 형태로 반환변환할 수 없는 문자열은 NaN을 반환 즉, parseFloat(string) 일시만일 '400,000' 의 값이 들어가게 된다면 결과 값은 400이 나온다, ','은 숫자가 아닌 문자기 때문에 파싱을 중단하기 때문이다. 때문에 자릿수 구분이 있는 숫자(금액) 같은 것을 parseFloat에 사용하려면 value  = String(value).replace(/,/g,..

로컬에서 할 때는 문제가 안되지만 저장소에 올릴때는 토큰/api 설정이나 서버url을 안올리는게 좋겠다. 그래서 .env파일에 별도로 관리하는 것이 좋다. [사전 조건] 1. create-react-app을 이용해 생성한 리액트 프로젝트 create-react-app으로 생성했다면 ' dotenv '를 통해 .env 파일을 import하지 않아도 된다. 다만 리액트에서 .env 설정값을 가져와 사용하려면 조건이 있다. REACT_APP_ 접두사 사용: 리액트에서는 환경 변수의 이름이 REACT_APP_로 시작해야 합니다. 예를 들어, REACT_APP_API_KEY=your-api-key와 같이 설정합니다. .env 파일의 재시작 없는 변경은 불가능: .env 파일의 내용이 변경되면, 개발 서버를 다시 ..