기록저장소

값 : 식이 평가되어 생성된 결과 * 모든 값은 데이터 타입을 가지며 메모리에 2진수 비트의 나열로 저장됨 ex. 0100 0001 = 65 or A 리터럴 : 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법 표현식 : 값으로 평가될 수 있는 문, 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조함, 숫자값으로 평가되는 표현식은 숫자값 대신 사용가능 //리터럴 표현식 10 'Hello' //식별자 표현식 sum person.name arr[1] //연산자 표현식 10 + 20 sum = 10 //함수, 메서드 호출 표현식 square(); person.getName() 문 : 프로그램을 구성하는 기본단위이자 최소 실행단위 토큰 : 문법적인 의미를 가지며 문법적으로 더이상..

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체, 그 메모리 공간을 식별하기 위해 붙인 이름 //변수는 하나의 값 저장을 위한 메커니즘이나 배열과 객체 같은 자료구조를 사용하면 여러개의 값을 그룹화해서 사용가능 var userId = 1; var userName = 'Lee'; //객체 var user = { id:1, name: 'Lee'} //배열 var users = [ {id: 1, name: 'Lee'}, {id: 2, name: 'Kim'} ]; 식별자 : 변수이름, 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 식별자는 값이 아닌 메모리 주소를 기억함 변수선언 : 변수를 생성하는 것, 값을 저장하기 위한 메모리 공간을 확보하고 변수이름과 확보된 메모리 공간의 주소를 연결하여 ..

Context란? 컴포넌트의 props를 통한 데이터 전달하여 모든 단계를 거쳐야하는 기존 방식의 단점을 보완하여 컴포넌트를 직접 전달, 여러 컴포넌트에서 자주 필요로 하는 데이터에 사용 Context를 사용하는 경우 여러개의 Components들이 접근해야하는 데이터 (ex. 로그인정보, 로그인여부, UI테마, 현재 언어 등) function App(props){ return ; } function Toolbar(props){ //이 Toolbar 컴포넌트는 ThemedButton에 theme를 넘겨주기 위해서 'theme' props를 가져감 //현재 테마를 알아야하는 모든 버튼에 대해서 props로 전달하는것은 비효율 return( {/* 호출1 */} ); } function ThemedButto..

Composition 방법과 Inheritance Composition : 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것, 합성 Composition 조합방법 - Containment : 하위 컴포넌트를 포함하는 형태의 합성 방법, Sidebar나 Dialog같은 Box형태의 컴포넌트는 자신의 하위 컴포넌터를 미리 알 수 없음, children이라는 props를 사용해서 조합 function FancyBorder(props){ return( {props.children} ); } React.createElement( type, [props], [..children] ); function WelcomDialog(props){ return( //FancyBorder 컴포넌트 내의 모든 jsx태그는 ..

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..