cs09g 블로그

2021-01-13T01:28:30 이라는 문자열을 Date 포맷으로 변경할 때, 다음과 같이 Safari에서의 결과가 잘못 표시되는 현상이 있다.

Safari에서는 timezone 값을 Chrome 등 다른 브라우저와 다르게 처리하여 발생하는 것으로 보인다.

해결하려면 국내 기준으로 시간 문자열 뒤에 +09:00를 추가하면 된다.

const datetimeString = '2021-01-13T01:28:30';
new Date(`${datetimeString}+09:00`);

하지만 고정 값을 넣는 것이 꺼려진다면 다음과 같이 timezone 값을 입력 시간에 더해주면 된다.

이 경우에는 timezone 식별자인 Z를 시간 문자열 뒤에 추가로 붙여준다.

const datetimeSring = '2021-01-13T01:28:30';
new Date(new Date(`${datetimeString}Z`).getTime() + new Date().getTimezoneOffset() * 60 * 1000);

출처: stackoverflow.com/a/54211231/3422425

1. this 바인딩과 함께 전달

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // SyntheticEvent
    }
    
    render() {
    	return (
            <button onClick={this.myMethod.bind(this, 'someParam')}></button> {/* this 바인딩과 함께 전달 */}
        );
    }
}

2. arrow function 활용

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // undefined
    }
    
    render() {
    	return (
            <button onClick={() => {this.myMethod('someParam')}></button> {/* arrow function 활용 */}
        );
    }
}

React 합성 이벤트가 필요한 경우 명시해주어야 한다.

class MyComponent extends React.Component {
    myMethod(param, e) {
    	console.log(param); // 'someParam'
        console.log(e); // SyntheticEvent
    }
    
    render() {
    	return (
            <button onClick={(e) => {this.myMethod('someParam', e)}></button> {/* arrow function 활용 */}
        );
    }
}

1. 생성자에서 핸들러에 this를 바인딩

class MyComponent extends React.Component {
    constructor() {
        this.state = {
            someState,
        };
        
        this.myMethod = this.myMethod.bind(this); // this 바인딩
    }
    
    myMethod() {
    	this.setState({someState: 'another state'});
    }
    
    render() {
    	return (
            <button onClick={this.myMethod}></button>
        );
    }
}

2. 핸들러 등록과 함께 this를 바인딩

class MyComponent extends React.Component {
    constructor() {
        this.state = {
            someState,
        };
    }
    
    myMethod() {
    	this.setState({someState: 'another state'});
    }
    
    render() {
    	return (
            <button onClick={this.myMethod.bind(this)}></button> {/* this 바인딩 */}
        );
    }
}

3. arrow function 으로 래핑

  * 메서드가 props로 자식 노드에게 전달될 경우, 자식 노드에서 해당 메소드에 대한 렌더링을 다시 진행할 수도 있으므로 권장하지 않는 방법이다.

class MyComponent extends React.Component {
    constructor() {
        this.state = {
            someState,
        };
    }
    
    myMethod() {
    	this.setState({someState: 'another state'});
    }
    
    render() {
    	return (
            <button onClick={() => this.myMethod()}></button> {/* arrow function 래핑 */}
        );
    }
}

4. 퍼블릭 클래스 필드 문법 활용

  * 실험적

class MyComponent extends React.Component {
    constructor() {
        this.state = {
            someState,
        };
    }
    
    // 퍼블릭하게 선언
    myMethod = () => {
    	this.setState({someState: 'another state'});
    }
    
    render() {
    	return (
            <button onClick={this.myMethod}></button>
        );
    }
}