삐제제의 개발 노트

useRef : Component의 어떤 부분을 선택 할 수 있는 방법. document.getElementByID()를 사용한 것 과 같은 효과 사용법 + 간단한 예제 import React, { useRef, useEffect } from "react"; const App = () => { const input = useRef(); useEffect(() => { setTimeout(() => { input.current.focus(); }, 5000); }, []); return ( Hi ); }; export default App; const 변수이름 = useRef(); . . . 이런식으로 사용한다. document.getElementByID() 와 같은 역할을 한다고 생각하면 편하다. 위 코..

useEffect : ComponentDidMount / ComponentDidUpdate / ComponentWillUnMount 의 역할을 하는 React hook 사용법 : useEffect(function, deps); 첫번째 인자는 리액트가 componentDidmount / componentDidUpdate 됐을때 실행 할 함수 두번째 인자는 dependency 이고 만약 이 두번째 인자가 존재한다면, 인자로 들어온 리스트에 있는 값이 변할때만 function이 실행되도록 활성화 된다. 간단한 예제 import React, { useEffect, useState } from "react"; const App = () => { const sayHello = () => console.log("He..

useState : 함수형 컴포넌트에서, state를 제어 할 수 있게 해주는 React Hook 사용법 : const [value, setValue] = useState(초깃값) value 에는 초깃값이 할당된다. setValue를 이용하여 값을 변경할 수 있다. 간단한 예제 import React, { useState } from "react"; const App = () => { const [value, setValue] = useState(0); const upNumber = () => setValue(value + 1); const downNumber = () => setValue(value - 1); return ( Count {value} UP DOWN ); }; export default ..

React를 접하기 전에, 바닐라 자바스크립트로 코딩했을때는 그냥 HTML태그를 이용해서 form을 만들고, input을 만들어서 정보를 보낼때도 되게 직관적으로 만들었었는데, React로 Input을 제어할 때는 조금 다른 방식으로 제어한다고한다. 그 이유에 대해서 내가 이해한 내용으로는 리액트에서는 변하는 모든 값들을 state에서 제어를 해야하기떄문에? Input 태그의 value 값을 리액트의 state에서 추적하게끔 코드를 짜야한다는것! 그리고 어딘가에 전송 할 땐 그 추적한 text를 보내주는것이다! class NameForm extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this...

Short-circuit AND operator 란? - 삼항 연산자를 단순화 할 수 있는 특별한 경우가 있다. 어떤 컴포넌트를 렌더링하거나 하지 않을때, && 연산자를 삼항 연산자처럼 사용할 수 있다. &&연산자는 다른 프로그래밍 언어도 그렇겠지만, 자바스크립트에서 왼쪽 식을 먼저 평가하고, 그 다음 오른쪽 식을 평가할지 결정한다. 예를 들면 if(true && false) 이런식으로 있으면, 왼쪽이 true니까 오른쪽으로 가서 false를 확인하고, false를 반환하지만 만약에 if(false && true) 이런 경우에는, 오른쪽 식을 평가하기 전에 왼쪽 식이 false 니까 false를 반환한다. 리액트에선 이 삼항 연산자를 이런식으로 사용할 수 도 있다. return ( { showHeader..

리액트로 코딩할때 디자인 패턴의 한 종류! 컨테이너(Container) : data와 state(상태값)를 가지고, api를 호출하고, 기타 모든 로직들을 처리한다. (데이터를 받아와서 처리하는 것을 담당함) 프리젠터(Presenter) : 컨테이너가 처리한 데이터들을 화면에 뿌려주는 역할을 하는 함수형 컴포넌트 프리젠터는 state(상태값), api, 클래스 등을 다루지 않는다. (데이터를 화면에 뿌려주고 스타일을 담당함) 이런식으로 구성함! HomePresenter.js : 스타일 담당, Container.js 로 export HomeContainer.js : 각종 로직 담당, Presenter로 처리한 데이터(prop 등) 넘겨줌, index.js 로 export index.js : 컴포넌트를 폴더..

npm i styled-components 먼저 설치가 필요한 모듈이기때문에 설치를 하고, import 해서 사용한다! 얘를 사용함으로써 얻는 특징은 style이 안에 있는 컴포넌트를 생성 할 수 있게 한다고한다! 이런식으로!! 컴포넌트 내부에서 CSS를 만들고 입힐수 있는것! VSC를 사용하고있다면, extension에서 vscode-styled-components를 검색하면, 자동완성 기능까지 사용할 수 있다! 코드를 보면 어떤식으로 사용하는지 알 수 있다! const (이름) = styled.태그명 `(css코드)`; * css 코드를 감싸고 있는것은 백틱이다. * 이런식으로 사용한다. * Prop값도 줄수 있다고한다. * 이렇게 styled-components 모듈을 이용하면, 클래스네임을 일일히..

컴포넌트를 폴더로 관리할 때 create-react-app 으로 생성한 프로젝트에서의 방법은 css 파일의 이름 뒷부분에 module을 붙여주는것이다. 그 다음, CSS를 적용할 컴포넌트에 import를 해준다. 원래는 이런식으로 import 했다면, 이런식으로 import 해준다! 그리고 클래스네임을 자바스크립트 오브젝트 처럼 사용한다! 이런식으로 하게되면, css를 우리가 정해준 className으로 받는것처럼 보이지만 className이 임의로 생성된다고한다. 보시다시피, 이렇게 하면 navList 라는걸 다른 파일에서 반복해서 사용 할 수 있게된다! (원래는 클래스네임이 중복되면 문제가 발생했었음!!) 그리고 그 곳에서도 클래스 네임이 임의로 생성될것이다! 나쁘지않은 방법이지만, 최고의 방법은 아..

1. map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 let Array = ["Apple", "Banana", "Tomato"]; let mapArray = Array.map((fruit) => `Nice ${fruit}`); console.log(mapArray); 결과 : 2. filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환 let Array = ["Apple", "Banana", "Tomato"]; let filterArray = Array.filter((fruit) => fruit.length > 5); console.log(filterArray); 결과 : 3. forEach : 주어진 함수를 배열 ..

이번에 리액트를 공부하고있는데, 자바스크립트에서 배열안에 있는 데이터들을 반환할 때, map 함수가 아주 유용하다는걸 느꼈다 map() 메서드 : callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환값으로 새로운 배열을 만듭니다. const numberArr = [1,2,3,4,5]; const result = numberArr.map((num) => num + 1); console.log(result); //결과 : [2,3,4,5,6] callback 함수에 들어가는 첫번째 매개변수는 순서대로 처리할 요소가 들어간다. (위 코드에서 num은 1,2,3,4,5 가 차례대로 불러져 num+1 하고 반환됨) const numberArr = [1,2,3,4,5]; const res..