기록저장소

브라우저 작동원리 브라우저 - HTML, 이미지, 폰트 등 사용자가 선택한 자원을 전송, 표현하는 소프트웨어 ex)크롬, 엣지, 사파리, 파이어폭스 등 - 웹표준을 따르는 HTML과 CSS로 구성됨 * 웹표준 : 표준이 없어 파편화가 심했기에 2019년 W3C와 WHATWG에서 웹표준 지정 브라우저의 기본구조 통신 ① 사용자가 주소표시줄에 주소 입력 ⓐ UI 스레드가 검색어인지 url인지 확인하여 파싱 ② 사용자가 [ENTER]입력 ⓑ UI 스레드가 네트워크 호출, 네트워크 스레드 요청처리, 응답이 HTML이라면 응답결과를 렌더러 프로세스에 전달 *스레드 : 프로세스에서 실행하는 프로그램 중 일부를 실행하는 역할 * 프로세스 : 어플리케이션을 실행할 프로그램 ⓒ HTML 데이터 수신 : 렌더러 프로세스의..

Shared State Shared State : State에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우, 하위 컴포넌트가 공통된 부모 컴포넌트의 state를 공유하여 사용하는 것, 하위 컴포넌트의 state를 공통 상위 컴포넌트로 올림 하위컴포넌트에서 State 공유하기 //물의 끓음 여부를 알려주는 컴포넌트 function BilingVerdic(props){ if(props.celsius >= 100) { return 물이 끓습니다.; } return 물이 끓지 않습니다.; } // function Calculator(props){ const [temperature, setTemperature] = useState(''); const handleChange = (event) ..

Form과 Controlled Component Form : 사용자로부터 입력을 받기위해 사용하는 것 //HTML Form 이름: 제출 Controlled Components : 사용자가 입력한 값이 접근, 제어가 가능하도록 하는 컴포넌트, 값이 리액트의 통제를 받는 Input Form Element, 사용자의 입력을 직접적으로 제어할 수 있음 function NameForm(props){ const [value, setValue] = useState(''); const handleChange = (event) => { setValue(event.target.value); //setValue : 새롭게 변경된 값을 value라는 state에 저장 //event : 이벤트 객체 //event.target ..

List와 Key List : 목록, Array(배열: JS의 변수나 객체들을 하나의 변수로 묶어놓은 것) Key : 열쇠, 각 객체나 아이템을 구분할 수 있는 고유한 값, 아이템들을 구분하기위한 고유한 문자열 여러개의 Component렌더링하기 map() : 배열의 각 변수에 처리후 리턴하는 것 const doubled = numbers.map((number) => number * 2); const number = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => {number} }; ReactDOM.render( {listItems}, document.getElementById('root') ); //렌더링된 코드 ReactDOM.render( ..

Conditional Rendering의 정의와 inline Conditions Conditional Rendering : 조건부 렌더링, 어떠한 조건에 따라서 렌더링이 달라지는 것 function UserGreeting(props){ return 다시 오셨군요! } function GuestGreeting(props){ return 회원가입을 해주세요. } function Greeting(props){ const isLoggedIn = props.isLoggedIn; if(isLoggedIn){ return ; } return; } JS의 Truthy와 Falsy //Truthy : true는 아니지만 true로 여겨지는 값 true {} (empty object) [] (empty array) 42 ..

Event의 정의 및 Event 다루기 Event : 특정사건, 사용자가 버튼을 클릭한 사건 //DOM의 Event Activate //React의 Event Activate Event Handler(Event Listener) : 이벤트가 발생했을 때 이벤트를 처리하는 함수 class Toggle extends React.Component{ constructor(props){ super(props); this.state = { isToggleOn: true }; //callback에서 `this`를 사용하기 위해서는 바인딩을 필수로 해야함 this.handleClick = this.handleClick.bind(this); } handleClick(){ this.setState(prevState => ..

Hooks의 개념과 useState, useEffect Hooks : React v16.8에서 등장, 기존에 존재하는 기능에 추가되는 기능 useState : state를 사용하기 위한 Hook //useState() 사용법 const [변수명, set함수명] = useState(초기값); function Counter(props){ var count = 0; return( 총 {count}번 클릭했습니다. count ++}> 클릭 ); } //useState 사용 function Counter(props){ count[count, setCount] = useState(0); return( 총 {count}번 클릭했습니다. setCount(count + 1)}> 클릭 ); } useEffect : sid..

State와 Lifecycle의 정의 state : 상태, 리액트 Components의 변경가능한 데이터(상태), 개발자가 정의함, 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야함(성능저하), javascript 객체, 직접 수정 불가 class LikeButton extends React.Component{ constructor(props){//클래스가 생성될때 실행되는 함수 super(props); this.state={ liked: false } } } //직접 수정 불가 //state 직접 수정(잘못된 사용법) this.state={ name: 'Inje' }; //setState 함수를 통한 수정(올바른 사용법) this.setState({ name: 'Inje' }); Life..

Components와 Props의 정의 Components : 속성들을 입력으로 받아서 element 생성, 리액트를 구성하는 가장 작은 빌딩블록, JS객체형태, 화면에 보이는 것들 기술, 붕어빵 틀 Props : Property(속성)의 줄임말, components의 속성, 붕어빵의 재료, 컴포넌트에 전달할 다양한 정보를 담고있는 자바스크립트 객체 Props의 특징 및 사용법 Props의 특징 : Read-only(값 변경x), 값을 변경하기 위해서는 새로운 값을 컴포넌트에 전달하여 새로운 Element 생성, 모든 리액트 컴포넌트는 Props를 직접 바꿀수 없고 같은 Props에 대해서는 항상 같은 결과를 보여줄것 Props 사용법 //jsx 사용 function App(props){ return (..

Elements의 정의와 생김새 Elements : 리액트 앱을 구성하는 가장 작은 블록들 (Elements are the smallest building blocks of React apps.) Descriptor : 화면에 나타나는 내용을 기술하는 자바스크립트 객체 React Elements의 생김새 : 자바스크립트 객체(불변성) 형태로 존재 //JS 객체 { type: 'button',//DOM 노드 props: {//속성 className: 'bg-green', children: { type: 'b', props: { children : 'Hello, element!' } } } } //랜더링 결과 Hello, element! //React 컴포넌트 element, JS 객체형태 { type: B..