728x90 JavaScript/React33 [React] 컴포넌트 , props 리액트 필수 개념 1.state 2. props 3. 컴포넌트 이번엔 props와 컴포넌트를 알아보자 리액트 컴포넌트 -컴포넌트 기반 구조 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고 이러한 컴포넌트들이 모여 전체 페이지를 구성 -개념적으로 자바스크립트 함수와 비슷함 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴 -컴포넌트 이름 짓기 컴포넌트 이름은 항상 대문자로 시작 소문자로 시작하면 컴포넌트를 DOM 태그로 인식하기 때문 Props -Props ? 리액트 컴포넌트의 속성 컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 -Props 특징 읽기 전용이다 리액트 컴포넌트의 props는 바꿀 수 없고 같은 props가 들어오면 항상 같은 엘리먼트를 리턴해야 함 -Pr.. 2023. 2. 21. [React] 초기 환경 셋팅, 라이브러리 설치 사전에 미리 node.js가 설치되어 있어야 함 리액트 폴더 생성 npx create-react-app 폴더명 cd 폴더명 npm run strat Router 설치 npm install react-router-dom Sass 설치 npm install node-sass Styled-Component 설치 npm add styled-components 설치 후 package.json에 styled-components 가 추가된 것을 확인. 명령어를 모를 때 npm help package.json 생성 npm init 자잘한 패키지들 모두 설치 npm install antd axios 설치 npm install axios redux 설치 npm install redux express 설치 npm insta.. 2023. 2. 18. [React] 리액트 state(useState) 리액트 필수 개념 1.state 2. props 3. 컴포넌트 리액트 state에 대해서 알아보자 ! State 화면에 표시하는 데이터나 길이가 변하는 상태 등을 모두 State로 관리한다. 컴포넌트의 상태를 나타내는 값이다. 이벤트가 실행되는 경우 등에 업데이트 처리를 수행함으로써 동적 애플리케이션 구현 useState useState 함수 반환값은 배열 형태로 첫 번째에 State 변수, 두 번째에 그 State를 업데이트하기 위한 함수가 설정됨 useState 사용 예 const [num,setNum] = useState(); 이때 num이 상태를 가진 변수가 되고 setNum이 상태를 업데이트하는 함수가 된다. useState는 함수이므로 사용할 때는 ()를 붙여 함수를 실행한다. 초깃값 설정 c.. 2023. 2. 14. 이전 1 2 3 4 다음 728x90
