$$config title: 리액트 공부 keywords: - IT - ... $$ # [https://ko.reactjs.org/docs/hello-world.html](https://ko.reactjs.org/docs/hello-world.html)를 공식튜토리얼을 참고 ## 1. ReactDOM ```javascript ReactDOM.render(

Hello, world!

, document.getElementById('root') ); ``` ## 2. JSX ```javascript const element =

Hello, world!

; const element = link ; ``` - 아래 예시처럼 자식태그도 포함 가능 ```javascript const element = (

Hello!

Good to see you here.

); ``` - 태그 문법은 문자열도, HTML도 아니다 - JSX는 React “엘리먼트(element)” 를 생성 - JSX는 주입 공격을 방지 (XSS (cross-site-scripting) 공격을 방지) ```javascript const title = response.potentiallyMaliciousInput; // 이것은 안전합니다. const element =

{title}

; ``` - 아래의 예시에서 Babel은 JSX를 React.createElement() 호출로 컴파일 ```javascript // 번역 전 const element = (

Hello, world!

); ``` ```javascript // 번역 후 const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' ); ``` - 번역 후 React.createElement는 아래의 객체를 생성 ```javascript // 주의: 다음 구조는 단순화되었습니다 const element = { type: 'h1', props: { className: 'greeting', children: 'Hello, world!' } }; ``` - React 엘리먼트는 불변객체 (엘리먼트의 자식이나 속성을 변경할 수 없음, const로 정의되어있어서?) ```javascript function tick() { // 객체 const element = (

Hello, world!

It is {new Date().toLocaleTimeString()}.

); // 함수 ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); ``` - 1초마다 ReactDOM이 다시 render가 되어 바뀐 시간을 계속해서 볼 수 있다. 그러나 element 객체는 불변인건 맞다. > 아래의 글이 무슨말인지 모르겠음(나중에 다시보자) > React에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들입니다. - 기능 - 에러 및 경고 메시지 - 렌더링 로직이 UI 로직과 연결 - 컴포넌트 생성 ## 3. 변수 선언 ```javascript const name = 'Josh Perez'; // 변수 선언 const element =

Hello, {name}

; // JSX문법 사용 ReactDOM.render( element, document.getElementById('root') ); ``` ## 4. 함수 사용 ```javascript // 함수 function formatName(user) { return user.firstName + ' ' + user.lastName; } // 객체 const user = { firstName: 'Harper', lastName: 'Perez' }; // 엘리먼트 (태그안에 함수 사용) const element = (

Hello, {formatName(user)}!

); // render ReactDOM.render( element, document.getElementById('root') ); ``` ## 5. if문 ```javascript function getGreeting(user) { if (user) { return

Hello, {formatName(user)}!

; } return

Hello, Stranger.

; } ``` ## 6. 함수 컴포넌트와 클래스 컴포넌트 - 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 합니다. ```javascript //함수형 const element = ; function Welcome(props) { return

Hello, {props.name}

; } ``` - props는 속성을 나타내는 데이터 ```javascript // 클래스형 const element = ; class Welcome extends React.Component { render() { return

Hello, {this.props.name}

; } } ``` - Welcome이라는 함수가 있으며 매개변수는 name이다 - 그리고 props는 name을 담고 있다. - `props는 매개변수라고 생각`하면 됨 - 컴포넌트는 `` - 컴포넌트의 이름은 항상 대문자로 시작 ```javascript // 함수 function Welcome(props) { return

Hello, {props.name}

; } // 함수 function App() { return (

// 한개의 컴포넌트로 여러개 렌더링

); } // render ReactDOM.render( , document.getElementById('root') ); ``` ## 7. props ```javascript function formatDate(date) { return date.toLocaleDateString(); } function Comment(props) { return (

{props.author.name}

{props.text}

{formatDate(props.date)}

); } const comment = { date: new Date(), text: 'I hope you enjoy learning React!', author: { name: 'Hello Kitty', avatarUrl: 'http://placekitten.com/g/64/64' } }; ReactDOM.render( , document.getElementById('root') ); ``` - 위의 코드 나누기 ```javascript function Avatar(props) { return (

); } ``` ```javascript function Comment(props) { return (

{props.author.name}

{props.text}

{formatDate(props.date)}

); } ``` ```javascript function UserInfo(props) { return (

{props.user.name}

); } ``` - 매개변수를 받아올 때 `props`로 받아오게 되는데 `props`안에 있는 값을 바로 가져오고 싶다면 `{ }` 안에 바로 넘겨받은 변수를 작성해주면 된다. 그리고 매개변수가 여러개일 경우 객체로 넘어온다. ``` function UserInfo( { user } ) { return (

{props.user.name}

); } ``` ## state - React 컴포넌트 안의 state와 생명주기에 대한 개념 - State를 올바르게 사용하기 1. 직접 State를 수정하지 마세요 - state를 직접 수정하면 render()가 실행되지 않기 때문에 직접 state를 수정하면 웹브라우저에 반영되어 나타나지 않는다. - 그렇기때문에 setState를 사용해야하고 state가 변경되었을 때 자동으로 render( )를 다시 실행해준다. - this.state를 지정할 수 있는 유일한 공간은 바로 constructor입니다. ```javascript // Wrong this.state.comment = 'Hello'; // Correct this.setState({comment: 'Hello'}); ``` 2. State 업데이트는 비동기적일 수도 있습니다. - this.props와 this.state가 비동기적으로 업데이트될 수 있기 때문에 다음 state를 계산할 때 해당 값에 의존해서는 안 됩니다. ```javascript // Wrong this.setState({ counter: this.state.counter + this.props.increment, }); // Correct this.setState((state, props) => ({ counter: state.counter + props.increment })); ``` 3. State 업데이트는 병합됩니다 - setState()를 호출할 때 React는 제공한 객체를 현재 state로 병합합니다. ## 클래스형에서 constructor안에 super을 쓰는 이유 ```javascript class Person { constructor(name) { this.name = name; } } class PolitePerson extends Person { constructor(name) { this.greetColleagues(); // ? This is disallowed, read below why super(name); } greetColleagues() { alert('Good morning folks!'); } } ``` - 위의 상황은 문제가 없어보이지만 아래의 상황에서는 greetColleagues가 호출 됬을 때 this.name은 초기화가 되지 않은 상태입니다. 그래서 보통 맨 처음에 부모를 먼저 실행시켜주는 걸 권장하고 있습니다. ```javascript greetColleagues() { alert('Good morning folks!'); alert('My name is ' + this.name + ', nice to meet you!'); } ``` - props 를 super의 인자로 전달하는 것을 실수로 빠뜨리더라도 정상적으로 동작되는 것을 보장 그러나 this.props는 사용불가 그래서 super(props)를 선언해주어야함 ```javascript // Inside React const instance = new YourComponent(props); instance.props = props; ``` - super()만 해주게 되면 부모의 객체는 위처럼 코드가 작성되어 있어 props는 사용가능 ```javascript // Inside React class Component { constructor(props) { this.props = props; // ... } } // Inside your code class Button extends React.Component { constructor(props) { super(); // ? We forgot to pass props console.log(props); // ✅ {} console.log(this.props); // ? undefined } // ... } ``` - 상속을 받은 객체는 항상 constructor안에 super(props)를 해야 정상적인 작동이 가능하다 ## 생명주기 메서드를 클래스에 추가하기 ```javascript class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } componentDidMount() { this.timerID = setInterval( () => this.tick(), 1000 ); } componentWillUnmount() { clearInterval(this.timerID); } tick() { this.setState({ date: new Date() }); } render() { return (

Hello, world!

It is {this.state.date.toLocaleTimeString()}.

); } } ``` - `componentDidMount()` 메서드는 컴포넌트 출력물이 DOM에 렌더링 된 후에 실행