개발 일지

composition 여러개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것 1. containment 보통 sidebar/dialog와 같은 box 형태의 컴포넌트는 하위 컴포넌트를 미리 알 수 없어 children prop을 사용해 composition 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 function FancyBorder(props){ return( {props.children} ); } function WelcomeDialog() { return( Welcome Thank you for visiting our spacecraft! ); } Colored by Color Scripter cs - FancyBorder 컴포넌트 안의 jsx 태그..

Shared State state에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우, 하위 컴포넌트들이 각자 state에 데이터를 갖고 있을 필요가 없다 예시) Temperature Calculator 기본 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 function BoilingVerdict(props){ if (props.celsius >= 100){ return The water would boil.; } return The water would not boil.; } class Calculator extends React.Component{ constructor(props){ super..

Form 사용자로부터 입력을 받기 위해 사용한다 HTML form 예시 1 2 3 4 5 6 7 Name: Colored by Color Scripter cs Controlled Component 그 값이 리액트의 통제를 받는 input form element 1. html form - 각각의 태그에서 자체적으로 state를 관리 2. controlled component - 모든 데이터를 component의 state에서 관리(setState() 사용) 모든 입력값을 대문자로 변경하는 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 handleChange(event){ this.setState({value: event.target.value.toUpper..

List array로 표현 (array: 자바스크립트의 변수나 객체들을 하나의 변수로 묶어놓은 것) react에서는 array를 사용하여 다수의 element를 렌더링할 수 있다 1. List를 사용하는 경우 1 2 3 4 5 6 7 8 9 const numbers = [1,2,3,4,5]; const listItems = numbers.map((number) => {number} ); ReactDOM.render( {listItems}, document.getElementById('root') ); Colored by Color Scripter cs - map함수를 이용해 return 2. List를 사용하지 않는 경우 1 2 3 4 5 6 7 8 9 10 ReactDOM.render( {1} {2} ..

Conditional Rendering 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 function UserGreeting(props){ return welcome back!; } function GuestGreeting(props){ return Please sign up.; } function Greeting(props){ const isLoggedIn = props.isLoggedIn; //conditional rendering if(isLoggedIn){ return ; } return ; } ReactDOM.render( , document.getElementById('root') ); Colored by Color Scripter cs ..

State react component에 대한 변경 가능한 데이터를 의미한다. state는 사용자가 정의하며 렌더링 시에 혹은 데이터 흐름에 필요한 값만 포함 시켜야 효율적이다. state는 자바 스크립트의 객체로 직접 수정하지 않는 것이 좋다. state는 다음과 같이 사용할 수 있다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 class LikeButton extends React.Component{ constructor(props) { super(props); this.state = { liked: false }; } render(){ if(this.state.liked){ return 'you liked this.'; } return e( 'butt..

Elements the smallest building blocks of react app 리액트 앱을 구성하는 가장 작은 블록으로 화면에 보이는 것들을 기술 불변성을 가진다 1 2 3 4 5 6 7 8 9 10 11 function tick(){ const element=( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render(element, document.getElementById(‘root’)); } setInterval(tick, 1000); Colored by Color Scripter cs - 시간 텍스트 부분만 (바뀐 부분만) 새롭게 렌더링 Components props를 입력으로 받아 react elements..

리액트 유저 인터페이스를 만들기 위한 자바스크립트 라이브러리로 페이스북 개발 리액트 장점 1. 빠른 화면 업데이트와 렌더링 속도 - virtual DOM(document object model): 웹페이지와 실제 돔(브라우저 돔) 사이의 일종의 버퍼 - 버츄얼 돔을 사용해 페이지(돔)를 직접 수정하지 않고 업데이트 해야할 최소한의 부분만 업데이트 할 수 있다 2. component-based - 웹페이지가 컴포넌트로 구성된다 - reusablility 재사용성이 높아 개발이 편리하다 3. 활발한 커뮤니티 - 개발자에게 장점 4. react native - 안드로이드/ios 모바일앱 개발 가능 JSX javascript+XML/HTML 1 const element = Hello, world!; cs JSX..