Hi, I'm JeongHun

1. 개요 ● 래익트 만든 홈페이지에서 url을 변경하여 페이지의 전환을 만들 수 있다. 페이지 전환에 따른 url은 변경되지만 페이지가 리랜더링 되지 않게 전환할 수 있다. ● 라우팅이라는 것은 사용자가 어떤 주소(url)로 들어왔을 때 해당 주소에 적당한 페이지를 사용자에게 보여주는 것이다. 2. 사용법 ● BrowserRouter란 react-router-dom을 적용하고 싶은 컴포넌트의 최상위 컴포넌트에 감싸주는 래퍼 컴포넌트이다. App에서 감싸주었다. 이렇게 하면 App이라고하는 컴포넌트 안에서는 BrowserRouter를 사용할 수 있는 상태가 된 것이다. ● Route import Route from 'react-router-dom'; const App = () => { return ( 제..

1. Context API란 hooks로 리액트 컴포넌트를 만들 때 state들이 많아지면 그 state들을 하나의 묶음으로 관리하기 위해 userReducer를 사용하여 state들을 관리하는 방법을 이전에 정리하였다. 이전 장에서 Tictactoe를 만들 때 상위 컴포넌트에서 하위 컴포넌트를 만들고 하위 컴포넌트에서 상위 컴포넌트의 state(useReducer로 관리 되는 state)들의 값에 접근(접근 또는 변경) 하기 위해 상위 부모 컴포넌트의 dispatch 함수를 하위 컴포넌트로 전달해줘야했다. 만약 하위 컴포넌트 상속 관계가 계속 된다면 상위 컴포넌트의 dispatch와 같은 프로퍼티(또는 함수)들을 수작업으로 하위 컴포넌트들에게 계속 전달해줘야하는 불편함이 있었다. 이것을 해결해주는 방법..

더보기 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 1. useReducer 1) useReducer 사용 코드 리액트에 hooks가 생기기면서 useEffect, useState 등을 사용하는데 state가 많아지면 관리가 어려워지고 틱택토 예시에서는 Table에서 Tr 컴포넌트를 거쳐 Td 컴포넌트로 Table의 state를 전달해야하는데 이렇게 많은 state를 전달하기엔 비효율적이다. useReducer를 사용하면 state를 한 번에 작성할 수 있고 관리하기가 쉬워진다. useReducer를 사용하여 state를 관리하면 state의 변경 방법 등이 존재하는데 아래에서 소개함 아래 코드는 useReducer를 통해 주석처리로 선언한 state를 한번에 묶어서 선언한..

더보기 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 1. useMemo const Lotto = () => { const lottoNumbers = useMemo(()=>getWinNumbers(), []); const [winNumbers, setWinumbers] = useState(lottoNumbers); ... } hooks에서 랜더링이 다시 일어날 때 컴포넌트 함수가 전체 코드가 다시 실행되기 때문에 만약 함수 (컴포넌트)안에서 무거운 함수들이나 다시 실행될 필요가 없는 함수들이 포함된 경우라면 랜더링을 다시하는데 매우 비효율적이다. useRef: 일반 값을 기억한다. useMemo는 복잡한 함수의 결과값을 기억한다. 즉 useMemo의 첫 번째 콜백함수가 리턴하..

1-1. 컴포넌트의 라이프 사이클 class C1 extends Component { state = { }; interval; changeHand = () => { ... } //처음 1번만 랜더링이 성공하면 호출됨-> 비동기 요청을 주로함 componentDidMount() { this.interval = setInterval(this.changeHand, 100); } //리 랜더링될 때 호출되는 메소드이다. componentDidUpdate() { } //컴포넌트가 제거되기 직전에 호출된다. -> 비동기 요청 정리를 주로함 comopnentWillUnmount() { clearInterval(this.interval); } render() return { .... } } 1) componentDid..

보호되어 있는 글입니다.

보호되어 있는 글입니다.

클래스로 작성된 컴포넌트에서 왜 일반 함수를 사용하기 보다 화살표 함수가 사용되는지 정리해보았다. 선행 개념1) 메소드란? js에서 함수와 메소드의 차이점을 보면 메소드란 객체에 바인딩된 함수를 일컫는 의미로 ES6에서는 메소드를 다음과 같이 정의한다. "메소드란 메소드 축약 표현으로 정의된 함수만을 의미한다." 위 정의를 좀 더 확장해서 정리해보면 우선 메소드는 non-constructor하다. (생성자 함수로 호출 불가능) prototype 프로퍼티가 없으며 프로토타입 역시 생성하지 않는다. var obj = { value : 1, objFunc() { //객체 리터럴에 선언된 메소드 console.log(">>"+this); //obj에 바인딩 function func4() {//메소드 안에 선언된..

1. shouldComponentUpdate 1) 언제 렌더가 다시 일어나냐? ● 해당 컴포넌트의 setState를 했을 때 랜덜링이 다시 일어난다. ● 컴포넌트의 props의 값이 변경되었을 때 다시 랜더링일 일어난다. 아래 코드를 보면 class Test extends Component { state = { continue : 0, } onClick = () => { this.setState({}); } render() { conosle.log("랜더링!"); return ( 클릭 ); } } module.exports = Test 버튼을 클릭할 때마다 onClick메소드가 호출되는데 setState에서 아무런 state의 값도 변경하지 않았지만 setState를 호출한 것만으로도 랜더링이일어난다. ..

1. map이란 1) 반복 되어 변경되는 값이 1개인 경우 render() { return ( {['1', '2', '3', '4', '5'}.map((v)=> { return( {v} ); })} ); } 리액트의 컴포넌트의 구성 안에서 render 안에서 반복문을 쓰는 방법을 정리한다. render 함수 안에선 for, if와 같은 반복문 등 제어문을 사용할 수 없다. 반복문부터 보면 반복을 구현해주는 방법 중 하나는 map을 사용하는 것이다. 이는 단순히 반복해서 어떤 작업을 하는 것인데 위 코드와 같이 [] 이런 배열 안에 요소들을 입력하고 배열 요소를 반복해서 출력하기 위해서는 배열함수의 map함수를 이용하면된다. map 함수 매개변수 안에는 콜백함수를 작성하는데 콜백함수의 매개변수 v의 값은 ..