프로그래밍/React
[React] Hook Flow 이해하기 2 :: App - Child, Clean-up
[React] Hook Flow 이해하기 2 :: App - Child, Clean-up
2021.09.14🎯 Hook Flow 이해하기 2 :: App - Child, Clean-up 훅의 호출 타이밍을 알아보자! 📝 Hook의 호출 타이밍 - Clean-up 타이밍에 집중해서 const rootElement = document.getElementById('root'); const Child = () => { console.log(" Child render start"); const [text, setText] = React.useState(() => { console.log(" Child useState"); return ""; }); React.useEffect(() => { console.log(" Child useEffect, no deps"); return () => { console.log(" C..
[React] Hook Flow 이해하기 1 :: App - Child
[React] Hook Flow 이해하기 1 :: App - Child
2021.09.14🎯 Hook Flow 이해하기 1 :: App - Child 훅의 호출 타이밍을 알아보자! 📝 Hook의 호출 타이밍 const rootElement = document.getElementById('root'); const App = () => { console.log("App render start"); // input 박스를 보여줄지 말지 알려주는 상태 const [show, setShow] = React.useState(() => { console.log("App useState"); return false }); React.useEffect(() => { console.log("App useEffect, no deps"); }) React.useEffect(() => { console.log("A..
[React] 커스텀 훅 만들기 :: use{Name}
[React] 커스텀 훅 만들기 :: use{Name}
2021.09.14🎯 use{Name} 커스텀 훅 이름 컨벤션은 카멜 케이스로 표기 📝 반복되는 Hook을 Custom Hook으로 만들기 const rootElement = document.getElementById('root'); function useLocalStorage(itemName, value = "") { const [state, setState] = React.useState(() => { return window.localStorage.getItem(itemName) || value; // 로컬스토리지에 값이 없으면 value를 반환. keyword, result는 ""로 초기값이 저장되고 typing은 false를 넘겨줘서 false가 저장된다. }); React.useEffect(() => { win..
[React] 컴포넌트 사이드 이펙트 다루기 :: useEffect
[React] 컴포넌트 사이드 이펙트 다루기 :: useEffect
2021.09.13🎯 useEffect useEffect를 사용하면 사이드 이펙트를 수행할 수 있다. 사이드 이펙트는 부수효과라고 생각하면 된다. useEffect는 컴포넌트가 렌더링 이후에 의도한 효과에 대해서만 부수효과가 발생된다. 📝 소제목 const rootElement = document.getElementById('root'); const App = () => { const [keyword, setKeyword] = React.useState(() => { console.log("initialize"); return window.localStorage.getItem("keyword") }); const [result, setResult] = React.useState(""); const [typing, setT..
[React] 컴포넌트 상태 다루기 :: useState
[React] 컴포넌트 상태 다루기 :: useState
2021.09.13🎯 useState DOM : 논리 트리 컴포넌트 : 엘리먼트의 집합 엘리먼트 : 컴포넌트의 구성 요소 📝 useState로 다시 만들어 보는 간단한 검색창 객체를 담아주고 계속 render를 해줬던 부분을 useState을 사용해서 변경된 값을 화면에 업데이트하여 반영해준다. const rootElement = document.getElementById('root'); const App = () => { const [keyword, setKeyword] = React.useState(""); const [result, setResult] = React.useState(""); const [typing, setTyping] = React.useState(false); function handleChang..
[React] 리액트 이벤트 핸들러
[React] 리액트 이벤트 핸들러
2021.09.11🎯 이벤트 핸들러 바닐라 JS -> on{event} / addEventListener React -> on{Event} 카멜 표기법으로 작성 const rootElement = document.getElementById('root'); const element = ( alert("pressed")} onMouseOut={ () => alert("Bye")} > Press ); ReactDOM.render(element, rootElement); 함수를 안에 넣어줄 수 있고 밖으로 뺄 수도 있다. const rootElement = document.getElementById('root'); const handleClick = () => alert("pressed") const handleMouseOut ..
[React] 리랜더링
[React] 리랜더링
2021.09.11🎯 리랜더링 바닐라 JS -> 변경으로 인한 Element를 다시 그림 React -> 변경된 부분만 다시 그림 리액트의 장점은 리랜더링에 있다. 📝 JS로 만든 랜덤 버튼 const rootElement = document.getElementById("root"); function random () { const number = Math.floor(Math.random() * (10 - 1) + 1); const element = ` ${number} `; rootElement.innerHTML = element; } setInterval(random, 1000); 계속해서 element를 다시 그린다. tap을 하면 포커스가 되는데 1초 뒤 숫자가 변경되면서 포커스가 풀린다. 태그가 새롭게 만들어진다..
[React] JS와 JSX 섞어 쓰기
[React] JS와 JSX 섞어 쓰기
2021.09.11🎯 JS와 JSX. 섞어 쓰기 같은 컴포넌트를 사용했지만 결과물을 다르게 만들 수 있다. 📝 짝수면 h1태그, 홀수면 h3태그 📝 선택된 숫자만 📝 반복문 - 숫자가 3일 때만 🏷 요약 interpolation → 이미 HTML에서 사용하고 있었다. (html 내 스크립트, 스타일 등 적용)
[React] Element 찍어내기
[React] Element 찍어내기
2021.09.11🎯 Element 찍어내기 수많은 태그를 하나하나 작성하기는 힘들다 → 함수를 사용하여 자동적으로 생성되도록 만들어준다. paint 함수 3번 찍어 내기 📝 장점 - 다른 변수들을 받아서 여러 개를 찍어낼 수 있다. 📝 리팩토링 Paint 함수는 JSX를 리턴하는 함수이다. { title, description }는 React.createElement의 두 번째 인자인 props다. html의 기존 태그와 헷갈리지 말라고 대문자를 작성해야 된다. 📝 children 사용 → 제한 없다! children에는 개수 제한이 없다. Hi를 계속 써도 된다. 계속해서 자기 자신을 또는 다른 사람을 찍어낼 수 있다. children은 제약 없다. 그냥 여러 개 찍어낼 수 있다. 🏷 요약 Function -> 재사용..
[React] 멀티 Element 생성하기 :: React.Fragment
[React] 멀티 Element 생성하기 :: React.Fragment
2021.09.11🎯 React.Fragment 멀티 Element 생성할 때 사용 📝 h태그를 리액트로 변환해보기 Hi Bye Children root에 div로 h1,h3 ,h5를 감싸서 넣어 주기 위와 같이 리액트는 하나의 박스에 감싸서 여러 태그를 묶어서 넣어주는데 감싸지 않고 넣어주는 방법을 없을까? → 리액트는 다 계획이 있다. 📝 React.Fragment React.Fragment는 부모로서 감싸주는 역할만 수행한다. 그리고 실제 html에 넣어줄 때는 쏙 빠진다. JSX 문법으로 교체 리팩토링1 리팩토링2 - 좀 더 html스러운 항상 Fragment 쓰기 귀찮다 ⇒ 사용 🏷 요약 여러 개의 태그를 생성하고 넣어 주기 위해서는 하나로 묶어주는 Fragment를 사용!
[React] JSX, Babel, 스프레드 연산자
[React] JSX, Babel, 스프레드 연산자
2021.09.11📝 이전 내용 복습 하지만 React.createElement를 사용해서 계속해서 태그를 만드는 것은 불편하다. → JSX 사용하면 불편 해결! 🎯 JSX 문자도 HTML도 아닌 JacaScript의 확장 문법이다. 예시 const element = Hello, World!; JS도 아닌 HTML도 아닌 중간의 애매한 영역처럼 느껴진다. React.createElement 표현식을 편하게 사용하기 위한 표현식 🎯 Babel 자바스크립트 컴파일러 컴파일러 : 언어 해석기, 특정 언어를 다른 프로그래밍 언어로 옮기는 프로그램이다. 즉, JSX 표현식을 자바스크립트가 이해할 수 있도록 컴파일해주는 도구이다. 예시 // JSX const element = Hello, World!; // JSX문법을 바벨로 컴파..
[React] ReactDOM.render
[React] ReactDOM.render
2021.09.11🎯 ReactDOM이란? React DOM이란 Virtual DOM에서 HTML을 생성하는 데 필요한 라이브러리이다. React DOM에는 리액트 엘리먼트를 브라우저에 렌더링 하는 데 필요한 모든 도구가 들어 있다. 📝 ReactDOM.render element는 리액트의 가장 작은 단위이다. ReactDOM.render( element, // (1) container, // (2) [callback] // (3) ) 화면에 그려질 리액트 element (집어넣어 줄 요소) 리액트 element를 해당 container DOM에 랜더링 (구체적인 위치) 랜더링 후 반환되는 값을 돌려주는 콜백 함수 📌 참고 [React] 순수 리액트 (가상 DOM, 리액트 엘리먼트, ReactDOM) ReactDOM - ..