React/이론공부 (13) 썸네일형 리스트형 [React Hooks] useRef useRef 란? - 저장공간 또는 DOM 요소에 접근하기 위해 사용되는 react hook Ref 은 reference (즉, 참조를 뜻함) 우리가 자바스크립트를 사용 할 때 DOM 을 선택하기 위해서 querySelector 등의 함수를 사용함 React 를 사용하는 프로젝트에서도 가끔씩 DOM 을 직접 선택해야 하는 상황이 필요함 그때 사용하는 것이 useRef useRef 의 기본 구문 const ref = useRef(value) 함수형 컴포넌트에서 useRef 를 부르면, ref 오브젝트를 반환해준다. ref object의 구조 { current : value } 반환된 ref 은 컴포넌트의 전 생의 주기를 통해 유지가 된다. => 컴포넌트가 계속해서 렌더링되어도 언마운트 되기 전까지는 값을 .. [React Hooks] useEffect useEffect 란? - 어떠한 컴포넌트가 Mount (화면에 첫 렌더링) , Update (다시 렌더링), Unmount (화면에서 사라질 때) 에 어떤 특정 작업을 처리할 코드를 실행할 때 사용하는 hook useEffect 기본 구문 1. 인자로 콜백함수만 받는 경우 useEffect(() => { 작업 }} 렌더링이 될 때 마다 실행이 됨 2. 첫번째 인자로 콜백함수를 받고 , 두번째 인자로 배열 (dependency array)을 받는 경우 useEffect(() => { 작업 }, [value]) 화면에 첫 렌더링이 될 때 실행됨, value 의 값이 변경될 때 실행됨 만약 빈 배열을 줄 경우, 화면이 처음 렌더링 될 때만 실행됨 useEffect 기초 예제 1. 계속 렌더링 될 경우 fun.. [React Hooks] useState State 란? 컴포넌트의 동적인 값을 상태 (state) 라고 함 사용자 인터랙션을 통해 컴포넌트의 상태 값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요함 React Hooks 가 나오기 전의 불편한 점 React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다. 클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 매우 힘들었음 UseState 기본 구문 컴포넌트의 상태를 생성 & 업데이트 할 수 있는 도구 (hook) 이다. const [state, setState] = useState(초기값) useState 의 인자에 초기값을 넣어준다 - useState(0) , useState(true) 등등 st.. 리액트 개발 환경 설치하기 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 설치 순서 노드 버전 매니저 (nvm) 로 노드제이에스 (node.js) 설치하기 yarn 과 create-react-app 설치 비주얼 스튜디오 코드와 플러그인 설치 노드 버전 매니저 (nvm) 으로 node.js 설치하기 node.js - 구글에서 공개한 소프트웨어 - V8 엔진을 기반으로 만든 자바스크립트 런타임 도구 > node.js 는 웹 브라우저가 아닌 컴퓨터 (또는 서버) 에서 자바스크립트를 실행할 수 있게 해줌 - npm 은 node.js 와 함께 설치가 된다 nvm - node.js 를 설치하거나 버전을 관리해주는 프로그램 NVM 설치하기 (window) window 1. 아래의 주소에서 nvm-setup... React (리액트)에 대해서 Do it! 리액트 프로그래밍 정석 책을 보면서 공부한 내용을 정리하는 글입니다. 리액트의 정체 프론트엔드의 프레임워크 중 하나 현재 주목받는 프레임워크 중 프레임워크 다운로드 현황 그래프에서 가장 우세한 프레임워크 페이스북을 개발할 때 사용한 기술이며, 공개 소프트웨어 가장 큰 특징은 "화면 출력에 특화된 프레임워크" 리액트의 장점 1. 컴포넌트로 화면 구성을 효율적으로 할 수 있음. 1. 컴포넌트 (component) 라는 작고 독립적인 코드 블록을 조합하여 빠르고 효율적으로 화면을 구성 2. 컴포넌트를 구성하는 코드는 조립하기 쉬운 형태를 가지고 있기 때문에 원하는 화면을 쉽게 만들 수 있음 "컴포넌트를 만드는 과정은 레고 블록을 조립한다"라고 이해하면 쉬움 3. 가상 화면 기술을 도입하여 화면 출.. 이전 1 2 다음
