Client(front단)
React
- React를 사용하게 되면 javascript만을 가지고 개발하는 것보다 수월하게 개발을 진행할 수 있다.
- 코드의 Component화를 통해 개발할 시 효율적이고 빠르게 개발 가능하다.
- facebook에서 지원하는 오픈소스 라이브러리로 유지보수 혹은 트렌드에 뒤처질 가능성이 적다.
props and state
props
- 컴포넌트 내부의 immutable Data
- 부모 component가 자식 component에 값을 전달할 때 사용하는 것.(읽기전용)
state
- state는 컴포넌트 자기 자신이 가지고 있는값
- setState()함수를 통해 값을 변경해 줄수있다.
- React에서 funtional 프로그래밍을 사용하며 useState()를 사용해 더 편하게 state값을 바꿀수 있게 되었다.
function Comments(props) {
// Redux의 state에서 user정보를 가져오기
const user = useSelector(state => state.user)
const [Comment, setComment] = useState("")
const handleChange = (e) => {
setComment(e.currentTarget.value)
}
const onSubmit = (e) => {
// 빈 comment를 Submit했을때 페이지가 refresh되는걸 막기위해
e.preventDefault();
const variables = {
content: Comment,
writer: user.userData._id,
postId: props.postId
}
Youtube_project에서 댓글파트에 대한 코드이다
- useState를 사용하여 Comment에 대한 state값을 handleChange를 이용하여 바꿔 줬다.
- 부모 Component인 Comment에서 props로 user의 정보를 같이 보내주며 자식 Component인 variables에서 postId:props.postId로 받아온 정보를사용한다
useEffect
- React Component가 rendering 될때마다 특정작업을 실행할 수 있도록하는 Hook.
- useEffect(function,deps)로 구성되며
- function은 수행하고자 하는 작업
- deps 는 배열 형태로 검사하고자 하는 특정 값 or 빈배열로 구성
function SideVideo() {
const [SideVideos, setSideVideos] = useState([])
useEffect(() => {
axios.get('/api/video/getVideos')
.then(response => {
if (response.data.success) {
console.log(response.data.videos)
setSideVideos(response.data.videos)
} else {
alert('Failed to get Videos')
}
})
}, [])
Youtube_project에서 sideVideo component의 일부이다.
- useEffect를 통해 랜더링 될때마다 video router에서 response.data.videos를 가져와 setSideVideos값을 바꿔준다.
- 마지막 deps가 빈 배열이면 새로고침되고 처음 한번만 rendering되며 배열안에 만약 SideVideos등을 넣는다면 SideVideos의 값이 바뀔때마다 rendering이 된다.
Author And Source
이 문제에 관하여(Client(front단)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@dongmen5149/React란-무엇인가저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)