Hi, I'm JeongHun

더보기 예제는 인프런의 제로초, "조현영"님의 강의를 들으면서 공부한 내용입니다. 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. 디스럭처링 할당(destructuring assignment) 이란 1) 디스럭처링 뜻 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three);// 1 2 3 배열은 구조화되었다고 한다. 디스럭처링 할당은 다른 말로 구조 분해 할당인데 구조화된 배열을 비구조화하여 각 요소를 변수에 개별적으로 할당하는 방법을 말한다. 아래 코드를 보면 var arr =[1, 2, 3] const [one, two, three] = arr; console.log(one, two, three) // 1 2 3 구조화된 배열을 구조 분해 할당 기법을 통해 개별 요소를 각 변수에 할당하는 비..

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의 값은 ..

0. webpack을 사용하는 이유 컴포넌트는 .jsx 형태로 클래스 또는 hooks로 만들어지며 만들어진 컴포넌트는 react-dom의 render 함수를 통해 html DOM 트리에 장착(?) 하게 된다. facebook과 같은 2만개의 컴포넌트가 존재하는 웹 사이트를 만든다면 jsx 파일이 2만개 존재할 수 있고 이 2만개의 jsx 파일을 html의 script태그로 정의해야하고 사실 jsx파일을 html파일에서 위 디렉토리 구조와 같이 client.jsx 파일에서 BaseBallGame.jsx 라는 Component를 require해서 client.jsx 에서 ReactDom.render를 호출해주는 파일이 된다. 그리고 index.html에서 root id를 가지는 요소 아래 웹펙을 통해 cli..