TIL] 리액트 기초

웹의 동작 개념

웹페이지는 서버에서 미리 준비한 것을 받아서 그려주는 것입니다.

1. 요청을 보냅니다 -> 2. 받은 HTML 파일을 그려줍니다.

1에서 요청은 서버가 만들어 놓은 API에 정해진 약속대로 요청을 보냅니다!

---

서버와 클라이언트

클라이언트 : 웹사이트를 보는 도구는 전부 클라이언트입니다.

서버 : 우리가 보는 웹사이트에 뿌려줄 것을 만들어서 클라이언트에 전달합니다.

---

서버리스

서버리스는 서버가 없는 것이 아닌 서버를 내가 만들 필요가 없단 것입니다!

서버리스는 백엔드 리스가 아닙니다!

---

Component(컴포넌트)

컴포넌트는 클래스형과 함수형이 있습니다.

리액트가 레고라면 컴포넌트는 블록이라 할 수 있습니다!

State와 Props

state는 컴포넌트가 가지고 있는 데이터입니다.

state는 한 컴포넌트에서만 사용하는 정보를 주로 넣어놓고 생성, 수정하는 데이터입니다.

생성도 수정도 오직 해당 컴포넌트 내에서만 이뤄지고 수정도 자유롭습니다.

props는 어떨까요?

props는 부모 컴포넌트로부터 전달받은 데이터입니다.

props로 받은 데이터는 수정할 수 없다는 특징이 있습니다!

함수형 컴포넌트

const _____ = (props) =>{
	
    return (
    	<div>
        	~~~~~내용~~~~
        </div>
    );
}

export default ____;

import _____ form '경로';

function App() {

	return (
    	<div className="App">
        	<h1>~~~~내용~~~~</h1>
            <________/>
        </div>
    );
}

export default App;

클래스형 컴포넌트

import ______ from '경로'

class App extends React.Component{

	constructor(props){
    	suepr(props)
        this.state = {
        	list : ['안녕', 'hi']
        };
    }
    
    render() {
    	return (
        <div className="App">
        	<h1>~~~~~내용~~~~</h1>
            <_______/>
        </div>
    );
  }
}

export default App;

const _____ = (props) => {

	console.log(props);
    
    return (
    	<div>
        	~~~내용~~~
        </div>
    );
}

---

this

this 키워드는 context 객체와 연관이 있습니다.

함수나 클래스 안에서 사용하면 this를 쓴 위치에 있는 값을 가지고 온다고 생각하면 됩니다!

ex) ~~ 클래스 안에서 쓰면, this. 변수명 은 ~~ 클래스 안에 있는 값을 가지고 오게 됩니다!

---

오늘은 주특기를 시작하는 날이었습니다!

리액트를 주특기로 선택하고 강의를 듣는데 너무 어려웠습니다!

우선 자바스크립트가 익숙하지 않기 때문에 어려웠고

낯선 것이 큰 것 같습니다!

하지만 프로그래밍 공부를 하면서 느끼고 항해를 하면서 느끼는 것은

불가능은 없다는 것입니다.

아직은 많이 어렵고 생소할지라도 열심히 공부하면

노력은 배신하지 않기에 어려울수록 노력을 더 더 더 해야겠습니다!!

파이팅!!👍👍👍✍️✍️✍️