기록저장소

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

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