본문 바로가기

내마음대로만들어보자/React58

[공식문서] 조건부 렌더링 1. 조건부 렌더링 이란? React에서의 조건부렌더링은 자바스크립트에서의 조건 처리와 같이 동작한다. if 나 조건부연산자에 따라 현재 상태를 나타내는 엘리먼트를 만들면 React가 현재상태에 맞게 UI를 업데이트 할것이다. * 예제 ( 사용자의 로그인 상태에 맞게 컴포넌트 중 하나를 보여주는 greeting 컴포넌트로 이해해보자.) function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ; } ReactDOM.render( // Try changing to isLoggedIn={true}: , document.getElementById('root') ); isLoggedIn pr.. 2021. 8. 26.
[공식 문서]이벤트 처리하기 - React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용한다. ※ 캐멀케이스 : 낙타의 모양에서 따온 방법이다. 첫번쨰는 소문자로 시작하고 두번쨰 단어부터 대문자로 시작한다. 단어와 단어 사이는 붙인다. - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. ex) Activate Lasers - React에서는 false를 반환해도 기본 동작을 방지 할 수 없으므로 반드시 preventDefault를 명시적으로 호출해야한다. function Form() { function handleSubmit(e) { e.preventDefault(); console.log('You clicked submit.'); } return ( Submit ); } 위에서 e 는 합성이벤트 .. 2021. 8. 26.
[공식 문서]State와 생명주기(Lifecycle) 시계 예시를 통해 컴포넌트를 스스로 타이머를 설정하고 매초 스스로 업데이트 하도록 만들어보자. ① 함수에서 클래스로 변환하기 React.Component를 확장하는 동일한 이름의 ES6 class를 생성합니다. render()라고 불리는 빈 메서드를 추가합니다. 함수의 내용을 render() 메서드 안으로 옮깁니다. render() 내용 안에 있는 props를 this.props로 변경합니다. 남아있는 빈 함수 선언을 삭제합니다. class Clock extends React.Component { render() { return ( Hello, world! It is {this.props.date.toLocaleTimeString()}. ); } } function tick() { ReactDOM.ren.. 2021. 8. 25.
[공식문서]Components 와 props 1. Components 란? 개념적으로 컴포넌트는 자바스크립트 함수와 유사하며, props라고 하는 임의의 입력을 받은 후 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. 2. 함수형 컴포넌트 , 클래스형 컴포넌트 function Welcom(props) { return Hello, {props.name} } 이 함수는 데이터를 가진 하나의 props (props는 속성을 나타내는 데이터) 객체 인자를 받은 후, React 엘리먼트를 반환하므로 유효한 React 컴포넌트다. class Welcom extends React.Component { render() { return Hello, {props.name} } } 3. 컴포넌트 렌더링 React가 사용자 정의로 작성한 const .. 2021. 8. 25.

티스토리툴바