본문 바로가기

전체 글70

React Hooks Hook:함수형 컴포넌트 내에서 상태 관리와 생명 주기 관련 기능을 사용할 수 있도록특별히 설계된 함. useState :가장 기본적인 hook, 함수 컴포넌트에서 가변적인 상태를 가지게 해줌. 함수형 업데이트 :// 기존에 우리가 사용하던 방식setState(number + 1);// 함수형 업데이트 setState(() => {}); 함수형 업데이트 방식은 동시에 명령을 내리면, 그 명령을 모아 순차적으로 실행 useEffect컴포넌트가 렌더링될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook 의존성 배열(dependency array)해당 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.useEffect(.. 2024. 11. 1.
CSS-in-Js CSS 파일 import - HTML tag 마다 classname 넣고 CSS 코드 작성 방식은 비효율 CSS-in-JS 방식 :자바스크립트 코드로 CSS 코드를 작성하여 컴포넌트를 꾸미는 방식const StBox = styled.div` // css와 동일하게 스타일 코드 작성`  GlobalStyles (전역 스타일링)프로젝트를 아우르는, 공통 스타일 적용 필요할 때 Sass (Syntactically Awesome Style Sheets)CSS를 효율적으로 사용하기 위해 만들어진 언어. css resetdefault style을 초디화하고 우리가 정하는대로만 표현// reset.csshtml, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5.. 2024. 10. 31.
Component & Rendering 컴포넌트란리액트의 핵심 빌딩 블록 중 하나로, UI 요소를 표현하는 최소한의 단위이며화면의 특정 부분이 어떻게 생길지 정하는 선언체. DOM (명령형 프로그래밍)명령형으로 작성된 코드의 경우 Hello, World! 를 출력하기 위해 컴퓨터가 수행하는절차를 일일히 코드로 작성해주어야 한다. 리액트 (선언형 프로그래밍)UI를 선언하고 render 함수를 호출하면 React가 알아서 절차를 수행.화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어 있음.// React 코드 (선언적인)const header = Hello World; // jsxReactDOM.render(header, document.getElementById('root')); 렌더링이란?컴포넌트가 현재 props와 state.. 2024. 10. 30.
State State란?컴포넌트 내부에서 바뀔 수 있는 값. useState 함수로 state를 만든다.state를 만들어주는 리액트에서 제공하는 기능. 사용법const [ value, setValue ] = useState( 초기값 )초기값을 initial state 라고 부름 이벤트 핸들러function onClickHandler() { console.log("");} useState + onChange Event 1. Input과 state 구현하기    Input에서는 보통 사용자가 입력한 값을 state로 관리하는 패턴을 많이 씀  불변성 메모리에 있는 값을 변경할 수 없는 것.원시 데이터는 불변성이 있고, 객체, 배열, 함수는 불변성 없음 리액트에서는 원시데이터가 아닌 데이터의 불변성을 지켜주는 것을 중.. 2024. 10. 30.
Props Props : 부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터.-> 컴포넌트 간의 정보 교류 방법 1. props는 반드시 위에서 아래 방향. 즉, [부모] -> [자식] (단방향)2. props는 반드시 읽기 전용으로 취급하며, 변경 x props 란 결국 부모 컴포넌트가 자식에게 넘겨준 데이터들의 묶음 prop drilling[부모] -> [자식] -> [그 자식] -> [그 자식의 자식]3번이나 데이터를 내려줘야 함. 이걸 아래로 뚫고 간다 해서 drilling이와 같은 패턴을 피하기 위해 Redux 와 같은 데이터 상태관리 툴을 배워야 함Props Children자식 컴포넌트로 정보를 전달하는 또 다른 방법. 얘도 props 임 용도 :Layout 컴포넌트를 만들 때 자주 사용 Layout 컴포넌.. 2024. 10. 30.
CRA (Create React App), JSX(JavaScript + XML) Create React App : Set up a modern web app by running one command. CRA : 완제품orreact, react-dom, babael, webpac 등 하나씩 세팅하여 조립CRA로 프로젝트 생성ls #현재 내가 위치하고 있는 곳이 어디인지 확인해보세요.cd 폴더이름 #리액트 프로젝트를 생성하고 싶은 폴더로 들어갑니다.yarn create react-app week-1 #프로젝트 생성!  React Component컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.개념적으로 컴포넌트는 JS 함수와 유사함."props" 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React .. 2024. 10. 30.

티스토리툴바