공밀레 님의 블로그

-forms?텍스트 입력 뿐만 아니라 체크박스나 셀렉트 등 사용자가 무언가 선택해야하는 모든 것.= 사용자로부터 입력을 받기 위해서 사용 -controlled component사용자가 입력한 값에 접근하고 제어할 수 있도록 해주는 컴포넌트. = 값이 리액트의 통제를 받는 input form elementfunction NameForm(props){ const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); } const handleSubmit = (event) => { alert('입력한 이름:' + value); even..

-List?같은 아이템을 순서대로 모아놓은 것. = 배열const list = [1,2,3]; -key?각 객체나 아이템을 구분할 수 있는 고유 값. 고유 문자열 -여러개의 컴포넌트 렌더링 하기 = map()const doubled = numbers.map((number) => number * 2); const numbers = [1,2,3,4,5];const listItems = numbers.map((number) => {number})ReactDOM.render( {listItemas} document.getElementById('root'););예시 -  map 함수를 통해서 배열에 들어가 있는 각 숫자를 li태그로 감싸 리턴하고 있다. -기본적인 list 컴포넌트function Number..

-conditional rendering?조건에 따른 렌더링 = 조건부 렌더링 = 어떠한 조건에 따라서 렌더링이 달라지는 것 =  조건문에 따라 렌더링이 달라지는 것function UserGreeting(props) { return 다시 오셨군요!}function GuestGreeting(props) { return 회원가입을 해주세요}function Greeting(props){ const isLoggedIn = props.isLoggedIn; //조건부 렌더링 if(isLoggedIn){ return ; } return ;}예시 -Elemet Variables렌더링 해야 될 컴포넌트를 변수처럼 다루고 싶을때 쓰는 방법 = 엘리먼트 변수function LoginBut..

-event사건이라는 의미. 사용자가 버튼을 클릭하는 것(버튼 클릭 이벤트).이벤트를 처리하는 것 = 이벤트를 핸들링 한다. ActivateDOM의 event 예제 Activate리액트의 event -event handler이벤트가 발생했을때 해당 이벤트를 처리하는 함수 = 이벤트 리스너 class Toggle extends React.Component{ constructor(props){ super(props); this.state = {isToggleOn: true}; //callback에서 'this'를 사용하기 위해서는 바인딩을 필수적으로 해야한다. this.handleClick = this.handleClick.bind(t..

-hooks?함수 컴포넌트에서 클래스 컴포넌트의 생명주기나 state 정의, setState 등의 작업을 할 수 있게 나온 것.hooks의 이름 앞에는 use를 붙인다. -대표적 hooks*useState = state를 사용하기 위한 hooks.const [변수명, set함수명] = useState(초기값);import React, {useState} from "react";//클릭할때마다 증가function Counter(props) { const [count, setCount] = useState(0); return( 총 {count}번 클릭했습니다. setCount(count+1)}> 클릭 ..

-state리액트에서 state는 리액트 컴포넌트의 데이터 상태. 리액트 컴포넌트의 변경 가능한 데이터의 상태.>>렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다state = 자바스크립트 객체 //state를 직접 수정 (X)this.state = { name : 'Inje'};//state 간접 수정(O)this.setState({ name : 'Inje' }); -lifecycle리액트 컴포넌트의 생명 주기. 생성되는 시점과 사라지는 시점이 정해져있다는 의미.생성 : mounting 렌더링 : updating삭제 : unmounting - 상위 컴포넌트에서 더이상 표출 되지 않을 때를 의미 컴포넌트는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다...

-components자바스크립트의 함수와 비슷하다.어떠한 속성값을 받아서 리액트 엘리먼트를 생성하여 리턴해 주는 것이다. -propsproperty를 줄인 단어 prop + s 를 붙인 것.컴포넌트에 들어가는 속성. 비유하자면 붕어빵 속 재료라고 보면 된다.컴포넌트의 모습과 속성을 결정하는 것이 props다.컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체. -props 특징읽기 전용 - 엘리먼트 생성 도중에는 값props을 변경할 수 없다. -component 만들기componrnt는 function component 와 class component가 있다.function Welcome(props){ return 안녕, {props.name};}function component : 간단한 코..

-elements?리액트 앱을 구성하는 요소. 가장 작은 블록들. -리액트 엘리먼트와 DOM 엘리먼트의 차이점DOM 엘리먼트: 실제 화면에 나타나는 내용을 기술하는 자바스크립트 객체. 상대적으로 크고 무거움리액트 엘리먼트: DOM 엘리먼트의 가상표현.상대적으로 작고 가벼움. -리액트 엘리먼트 특징불변성 : 한번 생성된 엘리먼트는 변하지 않는다. = 생성 후에는 children이나 arttributes를 바꿀 수 없다.              = 컴포넌트라는 틀에 따라 엘리먼트들이 생성된다.              = 렌더링을 해서 새로운 엘리먼트를 생성 교체하는게 수정하는 것이다.  -실습Clock.jsximport React from "react";function Clock(props){ retu..

-jsx? 자바스크립트 문법을 확장한 것. 자바스크립트 + xml or html 된 것.ex) const element = Hello, world!;                     react 에서는 이러한 역할을 React.createElement 를 이용해 jsx 코드를 자바스크립트로 변환한다. ex)class Hello extends React.Component { render() { return Hello {this.props.toWhat}; }}ReactDOM.render( , document.getElementbyId('root')); jsx 를 사용한 코드 (3번째, 8번째 줄) class Hello extends React.Component { render() { ..

terminal을 실행한다. 그럼 하단에 터미널 창이 뜬다. npx create-react-app my-app 명령어를 입력. 여기서 my-app은 폴더 명임 *오류발생*npm error enoent ENOENT: no such file or directory, lstat 'C:\Users\user\AppData\Roaming\npm' 해당 경로가 존재하지 않음. Roaming 폴더 아래에 npm 폴더가 없어서 생긴 오류. 이름이 같은 폴더를 만들어둬도 괜찮기 때문에 생성함. 이후 정상작동. 빈 폴더이기 때문에 설치를 하겠냐는 질문이 뜸 Need to install the following packages: create-react-app@5.0.1 Ok to proceed? (y) y y를 쳐서 설치를 ..