[리액트] 정리 2

1. JSX 문법으로 React element 만들기 

- React element를 함수로 만들어 준다.

- 이때 arrow function을 적극 활욯하자.

 : const Title = () => (~~~~~)

- 이때 변수명을 대문자로 해야 나중에 또다른 React element에 포함시킬 수 있다. 

- 함수로 만들었기 때문에 원하는 만큼 재사용이 가능하다. 

<script type="text/babel">    
    const root = document.getElementById("root");

    const Title = () => (
        <h3 onMouseEnter={()=>console.log("I'm a h3!")}>
            Hello I'm a title.
        </h3>
    );
    const Button = () => (
        <button
            style={{backgroundColor: "red",
        }}
        onClick={()=>console.log("I'm clicked!")}
        >
        Click Me.  
        </button>
    );

    const Container = ( 
        <div>
            <Title />
            <Button />
        </div>
        );
    ReactDOM.render(Container, root); 
</script>

 

2. React 컴포넌트 안에서 변수 사용하기 

- React는 interactive한 UI를 만드는데 최적화 되어있다.

- 백틱(`)을 사용하지 않고 { }로  바로 변수를 사용할 수 있다. 

- {} 을 사용하면 JSX 어디에서나 Javascript 코드를 작성할 수 있다. 

- 렌더링이 일어날 때 변수가 포함된 HTML element 전체가 아니라 그 변수만을 업데이트 해준다.

const root = document.getElementById("root");
let counter = 0;

function countUp() {
    counter += 1;
    render();
}

function render() {
    ReactDOM.render(<Container/ >, root); // 여기서 페이지가 랜더됨 
}

const Container = () => (
    <div>
        <h3>Total Clicks: {counter}</h3> // ` 백틱 사용할 필요 없음.    
        <button onClick={countUp}>Click me</button>
    </div>
);
render();

 

3. React를 좀더 활용하기 (State, modifier)

- 위에서 한 것처럼 하면 매번 업데이트가 필요할 때마다 render() 함수를 써야한다.

- React는 변수가 업데이트 될 때마다 컴포넌트를 자동으로 리렌더링하고 UI를 refresh 해준다.  

- 또한 전체를 바꾸지 않고 only modifiede component만 바꿔준다.(최적화)

- modifier로 state를 바꾼다. 

 

(1) React.useState() 

: array를 반환, [ initial value, modifier ]

(2) modifier

: modifier 함수는 전달받은 값으로 value를 업데이트하고 그 value를 가지고 자동으로 페이지를 리렌더링 해준다.

* state를 업데이트 하는 방법 

 1. 값을 전달

 2. 함수를 전달 -> 현재의 state를 전달받아 사용하기에 안전하다. 

 

function App(){                                        
        const data = React.useState(0); // array 반환 [0, f] : [ initial value, modifier]
        let [counter, setCounter] = data; // 배열의 두개 원소를 동시에 변수로 지정 
        const onClick = () => {
            // setCounter(counter + 1); // modifier 함수는 실행시 자동으로 리렌더링을 해준다. 
            setCounter((currnet) => currnet + 1); 
            // counter가 다른 곳에서 업데이트 될 수 도 있기 때문에 현재 state를 전달받는 함수를 작성해준다. 
        };                  
        return (
            <div>
            <h3>Total Clicks: {counter}</h3>
            <button onClick={onClick}>Click me</button>
        </div>
        );
    }