feat(ure): 새로운 기능 추가 fix: 버그 및 오류 수정 docs: 문서 수정 (README 등) style: 코드 포맷팅, 세미콜론 누락 등 로직 변경 없는 수정 refactor: 코드 리팩토링 (기능 변화 없음) test: 테스트 코드 추가 또는 수정 chore: 빌드 업무 수정, 패키지 매니저 설정 등 기타 작업
이 원리에 대해 이해를 해야지 어떤 개발자들이 어떤 파트에서 프로그래밍을 하는지를 알 수 있음
브라우저를 여는 우리의 개인 컴퓨터와 그 브라우저를 클라이언트라고함.
URL을 입력하고 엔터를 누르는 순간 인터넷망을 통해 서버쪽에 데이터를 요청하게 됨.
서버 같은 경우 클라이언트가 데이터를 요청하면 그 요청에 따라서 데이터를 보내주는 것
데이터를 요청하고 받는 원리이기 때문에 클라이언트 서버라는 이름이 붙여졌음.
프로젝트에서 실제로 작성하는 소스 코드가 들어가는 폴더
프로젝트 구조에 대한 일반적인 방법 중 하나는 CSS, JS 그리고 테스트 파일을 기능이나 라우트로 분류된 폴더에 같이 두는 방법
파일 구조를 선택하는 것에 있어 5분 이상 시간을 투자하지 말기
]]>prop은 외부자를 위한 것 state는 내부자를 위한 데이터
화면에서 계속 바뀔 수 있는 값을 저장하는 공간 -> 쇼핑몰 장바구니 개수, 좋아요 수, 입력창에 작성한 글자, 로그인 여부 처럼 사용자 행동에 따라 변하는 값들을 state로 관리함
state가 변경되면 React가 해당 컴포넌트를 다시 실행하고, 변경된 값을 화면에 보여주는 것.
]]>props.함수명();
함수가 값을 받을 수 있도록 만들어 둔 자리 이름 (함수 안으로 들어오는 값을 담는 변수)
function sayHello(name) {
console.log(name + "님 안녕하세요!");
}
=> 여기서 name이 파라미터 => sayHello(“예람”); 이라고 출력값을 넣어주면 name에 예람이 들어감
사용자가 화면에서 뭔가 했을 때 React가 알아차리는 신호
```function Button() { function handleClick() { alert(“버튼을 클릭했어요!”); }
return (
<button onClick={handleClick}>
클릭
</button>
);
}
-> 기본 예시
`
onClick은 “클릭 이벤트가 발생하면”이라는 뜻
handleClick은 “그때 실행할 함수”
```function InputBox() { function handleChange(event) { console.log(event.target.value); }
return <input onChange={handleChange} />; }```
event.target.value는 사용자가 input에 입력한 값
]]>properties의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하기 위한 읽기 전용 객체
Props는 컴포넌트의 재사용성을 극대화하는 핵심적인 문법
Props를 사용하지 않으면, 코드의 중복을 유발하고 유지보수가 어렵다.
function UserProfile(props) { return <div>Hello! {props.name}</div>; }
function App() {
return (
<div>
{/*
export default App;
방법 A : Props 객체 직접 사용
// ChildComponent.jsx export default function ChildComponent(props) { console.log(props); // { name: “영희”, age: 25, user: { name: “철수”, age: 20 } }
return ( <div> <p>이름: {props.name}</p> <p>나이: {props.age}</p> <p>다른 사용자: {props.user.name}</p> </div> ); }
방법 B : 구조 분해 할당
// ChildComponent.jsx export default function ChildComponent({ name, age, user }) { return ( <div> <p>이름: {name}</p> <p>나이: {age}</p> <p>다른 사용자: {user.name}</p> </div> ); }
자식 컴포넌트는 부모로부터 받은 Props를 절대로 직접 수정해서는 안됨.
]]>
1. 문자열 타입 프로퍼티
<MyComponent name="헬로리액트!">2. 문자열 이외 타입의 프로퍼티
<MyComponent
boolProp= {true} //boolean
arrProp= {['a','b','c']} //배열
objProp= //객체
funcProp= {() => { alert('알림창'); }} //함수
/>React는 JS 기반 UI라이브러리이다.
프레임워크(Framework)와 라이브러리(Library)의 차이점
외부 라이브러리 없이 브라우저가 인식하는 FrontEnd언어는 HTML, CSS, JS뿐임. 그래서 인식못하는 언어는 플러그인을 붙이거나 이해하는 언어로 번역해주는 도구를 사용함.
코드를 번역해주는 도구를 번들러(Bundler)라고 하는데, 예전엔 Webpack를 썼지만, 요즘은 Vite(속도가 훨씬 빠름)를 많이 씀.
리액트를 만드는 데에는 class vs function이 있음. -> funtion으로 진행될 예정
– 개정판 3까지
]]>###
1. 카멜 케이스(camel Case)
첫 글자는 소문자, 두번째 단어부터는 띄어쓰기 없이 대문자로 표기
ex. visitorName
2. 파스칼 케이스(PascelCase)
모든 단어를 띄어쓰기없이 대문자로 시작
ex. VisitorName
3. 스네이크 케이스(snake_case)
모든 단어를 소문자로 작성하고 단어사이에 언더바를 넣기
ex. visitor_name
4. 케밥 케이스(kebab-case)
모든 단어를 소문자로 작성하고 단어사이에 대시를 넣기
ex. visitor-name